使用 CSS Grid 创建响应式平铺布局答案

【问题标题】：Create responsive tile layout with CSS Grid使用 CSS Grid 创建响应式平铺布局
【发布时间】：2020-05-19 09:23:11
【问题描述】：

我正在进入 CSS Grid，我想知道如何用它创建一个响应式的 tile-like 布局，如下所示：

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

.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>

【问题讨论】：

标签： html css responsive-design css-grid

【解决方案1】：

您可以参考 w3schools 的tutorial。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  /* background-color: Tomato; */
  padding: 10px;
}

.grid-container > div {
  background-color: dodgerblue;
  color: white;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

<div class="grid-container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

【讨论】：