CSS 网格布局 (CSS Grid Layout)

CSS 网格布局（Grid Layout）是 CSS3 引入的一种二维布局系统，可以让你更加精确和灵活地控制网页元素的布局。它允许开发者定义列、行，并在这些列和行之间定位元素，适用于复杂的网页布局。CSS 网格布局解决了传统布局方法中的许多问题，例如，复杂的对齐、间距控制以及元素的顺序管理。

1️⃣ 基础概念

  • 网格容器（Grid Container）：使用 display: grid 或 display: inline-grid 的元素。它作为网格的父元素。
  • 网格项（Grid Items）：网格容器内的直接子元素，每个子元素都是一个网格项。
  • 网格线（Grid Lines）：网格的分隔线，分为水平和垂直的线条，定位网格项时，可以通过网格线进行引用。
  • 网格单元格（Grid Cell）：网格的一个区域，由两个相邻的网格线所包围的区域。
  • 网格区域（Grid Area）：网格单元格的一部分，由四条网格线围成的区域，可以跨越多个单元格。

2️⃣ 创建网格容器

要使用网格布局，首先要将父元素设置为网格容器：

.container {
  display: grid;  /* 将容器设置为网格布局 */
}

3️⃣ 定义列和行

通过设置 grid-template-columns 和 grid-template-rows，可以定义网格容器的列和行。

  • grid-template-columns：定义列的宽度。
  • grid-template-rows：定义行的高度。
.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;  /* 定义三列，宽度分别为 100px、200px 和 100px */
  grid-template-rows: 100px 200px;           /* 定义两行，高度分别为 100px 和 200px */
}

简写：如果列和行的数量相等，或者你想给所有的列/行设置相同的尺寸，可以使用简写形式：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 创建三列，宽度均分 */
  grid-template-rows: repeat(2, 1fr);     /* 创建两行，高度均分 */
}
  • repeat(3, 1fr) 表示创建三列，每列宽度为容器宽度的三分之一。
  • 1fr 是 CSS Grid 的分配单位，表示“可用空间的一个分数”，在设置列和行时常用。

4️⃣ 网格间距

  • grid-gap：用于设置网格项之间的间距。你可以分别定义水平和垂直方向上的间距。
.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;  /* 设置行和列之间的间距为 10px */
}
  • 你也可以分开设置行和列的间距：
.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 100px;
  grid-column-gap: 10px;  /* 列之间的间距 */
  grid-row-gap: 20px;     /* 行之间的间距 */
}

5️⃣ 网格项的位置

每个子元素（网格项）可以放置在特定的网格区域中，使用以下属性：

  • grid-column：指定网格项在水平方向的起始列和结束列。
  • grid-row：指定网格项在垂直方向的起始行和结束行。
.item {
  grid-column: 1 / 3;  /* 网格项从第 1 列跨越到第 3 列 */
  grid-row: 1 / 2;     /* 网格项从第 1 行跨越到第 2 行 */
}
  • 1 / 3 表示该项从第 1 列开始，到第 3 列结束（注意，结束列是排除的）。
  • 1 / 2 表示该项从第 1 行开始，到第 2 行结束。

6️⃣ 简化位置（grid-area）

使用 grid-area 属性可以同时设置元素的 grid-row 和 grid-column，使代码更简洁。

.item {
  grid-area: 1 / 1 / 3 / 3;  /* 等同于 grid-column: 1 / 3; grid-row: 1 / 3; */
}
  • grid-area 的值按照 grid-row-start / grid-column-start / grid-row-end / grid-column-end 的顺序给出。

7️⃣ 自动布局与自动填充

  • auto-fill：自动填充容器中的空间，直到没有更多空间可以分配给网格项。
  • auto-fit：与 auto-fill 类似，但会自动调整网格项的大小，使其填满可用空间。
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 自动填充，最小宽度为 100px，最大宽度为 1fr */
}

8️⃣ 嵌套网格布局

网格项本身也可以是网格容器，这样就可以实现嵌套网格布局。

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

.item {
  display: grid; /* 嵌套网格布局 */
  grid-template-columns: 1fr 2fr;
}

9️⃣ CSS Grid 布局示例

HTML：

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
</div>

CSS：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 列，均分宽度 */
  grid-template-rows: repeat(2, 100px); /* 2 行，100px 高 */
  grid-gap: 10px;  /* 设置网格项间距 */
}

.item1 {
  background-color: lightblue;
  grid-column: 1 / 2; /* 从第 1 列开始，跨越 1 列 */
}

.item2 {
  background-color: lightgreen;
  grid-column: 2 / 4; /* 从第 2 列开始，跨越到第 4 列 */
}

.item3 {
  background-color: lightcoral;
  grid-row: 2; /* 放在第 2 行 */
}

.item4 {
  background-color: lightgoldenrodyellow;
  grid-column: 1 / 3; /* 跨越前两列 */
}

.item5 {
  background-color: lightpink;
}

效果说明：

  • 容器：有 3 列和 2 行，网格项之间有 10px 的间距。
  • 项 1：占据第 1 列。
  • 项 2：占据第 2 到第 3 列。
  • 项 3：放置在第 2 行。
  • 项 4：跨越前两列。
  • 项 5：自动填充剩余空间。

10️⃣ 总结

CSS 网格布局是一个强大且灵活的布局工具，可以实现复杂的二维布局。通过定义网格容器和网格项，使用网格线来定位和对齐元素，网格布局大大简化了布局过程。你可以定义不同的列和行，调整元素在网格中的位置，并且可以轻松处理响应式设计和动态内容。