CSS Grid 网格布局全解析

CSS Grid 网格布局是现代 CSS 布局中的一种全新方式。它可以轻松地分割页面为行和列，并使其直接的子元素占据这些区域中的任何数量。

基础概念

在使用 CSS Grid 之前，我们需要先了解一些基础概念。

网格容器（Grid Container）

网格容器是一个包含网格项（Grid Item）的容器。通过将 display 属性设置为 grid 或 inline-grid，来创建一个网格容器。

.grid-container {
  display: grid;
}

网格行（Grid Row）

网格行是一个网格的水平部分，跨越网格区域的数量通过 grid-template-rows 属性来指定。

.grid-container {
  display: grid;
  grid-template-rows: 50px 100px;
}

此示例中，网格容器将会包含2行，高度分别为50px和100px。

网格列（Grid Column）

网格列是一个网格的垂直部分，跨越网格区域的数量通过 grid-template-columns 属性来指定。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

此示例中，网格容器将会包含2列，第一列的宽度为第二列的一半。

网格交叉点（Grid Cell）

网格交叉点是网格中的交叉点，其中行和列相交，形成一个矩形区域。网格交叉点的位置由行和列的位置决定。

.grid-container {
  display: grid;
  grid-template-rows: 50px 100px;
  grid-template-columns: 1fr 2fr;
}

.grid-item {
  grid-row: 1 / 2; /* 从第1行到第2行 */
  grid-column: 1 / 2; /* 从第1列到第2列 */
}

此示例中，我们选择了网格容器的第1行和第1列的交叉点，并将一个网格项放置在该位置。

示例1：创建网格容器

创建网格容器的方法非常简单。只需要将要使用网格布局的元素的 display 属性设置为 grid 即可。

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

.grid-container {
  display: grid;
  height: 500px;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}

此示例中，我们将一个 div 元素设置为网格容器，同时包含有3个 div 元素作为网格项。我们还指定了该容器的高度，定义了列之间的间距并设置了该容器的列宽。

示例2：网格项的位置和尺寸

要指定一个网格项在网格中的位置和尺寸，则需要使用 grid-row 和 grid-column 属性。

<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
  <div class="grid-item">D</div>
  <div class="grid-item">E</div>
  <div class="grid-item">F</div>
</div>

.grid-container {
  display: grid;
  height: 500px;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item:nth-child(1) {
  grid-row: 1 / 3; /* 扩展至2行 */
  grid-column: 1 / 3; /* 扩展至2列 */
}

.grid-item:nth-child(2) {
  grid-row: 1 / 2;
  grid-column: 3 / 4; /* 占据第3列 */
}

.grid-item:nth-child(3) {
  grid-row: 1 / 2;
  grid-column: 2 / 3; /* 占据第2列 */
}

.grid-item:nth-child(4) {
  grid-row: 2 / 3; /* 占据第2行 */
  grid-column: 3 / 4;
}

.grid-item:nth-child(5) {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.grid-item:nth-child(6) {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

此示例中，我们指定每个网格项的网格坐标（左上角和右下角），来确定每个网格项在网格中的位置和尺寸。