使用CSS网格创建自适应图块布局

Question

我正在进入CSS网格，我想知道如何使用它创建一个响应式的类似瓷砖的布局，就像这样：

https://aggie.io/0g_rzi1fg7

对于这样的事情，网格是一种好方法吗？？标记：

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 50%;
  grid-template-columns: 50% 50%;

  a {
    border: 1px solid blue;
  }
}

<div class="grid">
  <a href="" class="grid-lg">
    Large item here
  </a>

  <div class="grid-sm-container">
    <a class="grid-sm">
      Smaller item here
    </a>
    <a class="grid-sm">
      Smaller item here
    </a>
    <a class="grid-sm">
      Smaller item here
    </a>
    <a class="grid-sm">
      Smaller item here
    </a>
  </div>
</div>
    

Answer 1

您可以参考w3schools的tutorial。