display:grid

`display: grid` 是 CSS 的一个属性，用于创建一个网格布局。它允许你将一个元素的子元素划分为行和列，并在这些行和列中放置内容。使用 `grid-template-rows` 和 `grid-template-columns` 可以定义网格的行和列，使用 `grid-template-areas` 可以定义每个单元格的名称，然后使用 `grid-area` 将元素放置到对应的单元格中。

以下是一个简单的示例：

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "item1 item2"
    "item3 item4";
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.item4 {
  grid-area: item4;
}

这个例子创建了一个具有两行两列的网格布局，并将每个元素放置在相应的单元格中。`1fr` 意味着每一列和每一行都应该占用可用空间的相等份额。 `grid-template-areas` 允许我们将单元格命名为一个字符串，并将相应的元素放置到这些单元格中。在这个例子中，我们使用 `grid-area` 将每个元素放置到对应的单元格中。