CSS3 网格布局（Grid Layout）是一个强大的二维布局系统，它允许你在网页中创建复杂的布局，且无需使用浮动或定位。通过定义行和列，网格布局使得元素的排列更加灵活和可控。它使得创建响应式和精确的布局变得更加简洁。

1. 基本概念

网格布局由 容器（Grid Container） 和 项（Grid Items） 组成，容器内的项将根据设定的网格规则进行排列。

• 容器：使用 display: grid 或 display: inline-grid 来创建。
• 项：容器内的直接子元素。

示例：创建一个基本的网格容器

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 创建三列 */
  grid-gap: 10px; /* 列与列之间的间隙 */
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

2. 定义行和列（grid-template-columns, grid-template-rows）

• grid-template-columns：定义网格的列。可以使用固定值（如 px、em）或相对单位（如 fr）来设定列宽。
• grid-template-rows：定义网格的行。类似于 grid-template-columns，它可以设置行高。
• fr：表示可用空间的份额。例如 1fr 代表容器的 1 份宽度，2fr 代表容器的 2 份宽度。

示例：创建一个 2 行 3 列的网格

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 第一列和第三列为相等宽度，第二列宽度是第一列的两倍 */
  grid-template-rows: auto auto; /* 自动调整行高 */
  grid-gap: 10px;
}

3. 网格间距（grid-gap）

grid-gap 属性用于设置网格项之间的间距，包括行和列之间的间隙。你也可以分别使用 grid-column-gap 和 grid-row-gap 来设置单独的列和行间隙。

示例：设置列间距和行间距

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 15px; /* 列间距 */
  grid-row-gap: 20px; /* 行间距 */
}

4. 自动放置（auto-placement）

网格项会根据定义的网格系统自动排列。如果没有特别指定项目的位置，它会自动根据位置来填充网格空间。

示例：自动放置项目

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

在这种情况下，所有项目将自动依次填充网格的每一格。

5. 定义项目的位置（grid-column, grid-row）

可以使用 grid-column 和 grid-row 来定义单个网格项在网格中的位置。你可以指定一个起始位置和结束位置。

• grid-column：指定一个项目从哪一列开始，到哪一列结束。
• grid-row：指定一个项目从哪一行开始，到哪一行结束。

示例：设置项目的位置

.item1 {
  grid-column: 1 / 3; /* 从第一列到第三列 */
  grid-row: 1 / 2; /* 第一行 */
}

.item2 {
  grid-column: 2 / 4; /* 从第二列到第四列 */
  grid-row: 2 / 3; /* 第二行 */
}

6. 网格项合并（grid-column-span, grid-row-span）

grid-column-span 和 grid-row-span 属性用于使一个网格项跨越多个列或行。

示例：合并列和行

.item1 {
  grid-column: span 2; /* 跨越两列 */
  grid-row: span 2; /* 跨越两行 */
}

7. 网格容器的对齐（align-items, justify-items, align-content, justify-content）

这些属性可以用来控制网格项目在容器内的对齐方式。

• align-items：控制所有项目在交叉轴（垂直方向）的对齐方式。
• justify-items：控制所有项目在主轴（水平方向）的对齐方式。
• align-content：控制网格容器在交叉轴上的对齐方式。
• justify-content：控制网格容器在主轴上的对齐方式。

示例：网格容器的对齐

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  justify-items: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  justify-content: space-around; /* 主轴方向上均匀分布 */
  align-content: space-between; /* 交叉轴方向上均匀分布 */
}

8. 简写方式

grid-template 属性是 grid-template-columns、grid-template-rows 和 grid-template-areas 的简写形式。

示例：简写形式

.container {
  display: grid;
  grid-template: "header header header" auto 
                 "main sidebar sidebar" 1fr;
}

9. 网格区域（grid-template-areas）

grid-template-areas 属性允许你为网格区域分配名称，从而使得布局更具可读性。它允许你将不同的区域通过名称与项目对应起来。

示例：使用网格区域

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: 
    "header header"
    "main sidebar";
}

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

10. 网格布局的实用示例

示例：基本网格布局

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 创建三列 */
  grid-template-rows: auto auto; /* 创建两行 */
  grid-gap: 10px;
}

.item {
  padding: 20px;
  background-color: lightblue;
  text-align: center;
}

在这个示例中，四个项目将被均匀地分布到一个 2 行 3 列的网格中。

总结

CSS3 网格布局是一个强大的工具，能够帮助开发者更轻松地实现复杂的网页布局。它提供了更直观、更灵活的方式来控制元素的排列与对齐，比传统的布局方法更加高效和简洁。掌握网格布局的基本属性，如 grid-template-columns、grid-template-rows、grid-gap 等，将使得你能够更加轻松地实现响应式布局和精细的页面布局。