CSS Grid 布局教程 – wiki大全

---

掌握 CSS Grid 布局：构建强大而灵活的网页界面

在现代网页设计中，布局是创建视觉吸引力并确保用户体验流畅的关键。长期以来，开发者依赖于浮动（floats）、定位（positioning）和后来的 Flexbox 来实现页面布局。然而，随着 CSS Grid Layout 的出现，我们迎来了一个专为二维布局设计、功能更为强大和灵活的工具。

CSS Grid 不仅仅是 Flexbox 的替代品，它更是一个补充。如果说 Flexbox 擅长于在一个维度（行或列）上排列和对齐项目，那么 Grid 则专注于在两个维度（行和列）上同时进行布局，使其成为构建整个页面结构和复杂组件的理想选择。

本文将带您深入了解 CSS Grid 的核心概念、常用属性及其在实际项目中的应用。

核心概念与术语

要高效地使用 CSS Grid，首先需要理解其基本术语：

1. 网格容器 (Grid Container)

   • 任何应用了 display: grid; 或 display: inline-grid; 的 HTML 元素。它是所有网格项目的父级，并为其直接子元素建立了一个网格格式化上下文。
   • 示例：
     html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
css
.container {
display: grid;
}

2. 网格项目 (Grid Items)

   • 网格容器的直接子元素。它们是将在网格中进行布局和排列的元素。

3. 网格线 (Grid Lines)

   • 构成网格结构的水平和垂直分隔线。它们从 1 开始编号，并作为定位网格项目的参考点。
   • 例如，一个 3×3 的网格会有 4 条垂直网格线和 4 条水平网格线。

4. 网格轨道 (Grid Tracks)

   • 两条相邻网格线之间的空间，代表网格的行（rows）和列（columns）。

5. 网格单元格 (Grid Cells)

   • 网格的最小单位，由一个行轨道和一个列轨道的交集形成。概念上类似于表格中的单元格。

6. 网格区域 (Grid Areas)

   • 网格内一个矩形的区域，可以跨越多个网格单元格。通过四条网格线的交点定义。

定义网格结构

使用 CSS Grid 的第一步是定义网格容器并设置其结构。

1. 建立网格容器

只需将 display: grid; 或 display: inline-grid; 应用到父元素即可：

css
.container {
display: grid;
}

2. 定义列和行轨道

• grid-template-columns: 定义网格的列数和每列的宽度。
• grid-template-rows: 定义网格的行数和每行的高度。

这些属性支持多种值和单位：

• 固定长度: 使用 px, em, rem 等绝对单位。
  css
grid-template-columns: 100px 200px 100px; /* 三列，宽度分别为 100px, 200px, 100px */
grid-template-rows: 50px auto 1fr; /* 三行，高度分别为 50px, 自动高度, 1 份剩余空间 */
• 百分比: 以容器宽度或高度的百分比定义。
  css
grid-template-columns: 25% 50% 25%;
• fr 单位 (Fractional Unit): 分配可用空间。1fr 表示一个分数单位，所有 fr 单位会根据其比例瓜分剩余空间。
  css
grid-template-columns: 1fr 2fr 1fr; /* 三列，第二列是第一和第三列的两倍宽 */
• auto 关键字: 允许浏览器根据内容自动确定轨道的大小。
• repeat() 函数: 用于重复创建多个相同大小的轨道。
  css
grid-template-columns: repeat(3, 1fr); /* 创建 3 个等宽的列 */
grid-template-rows: repeat(2, 50px) 1fr; /* 创建 2 行 50px 高，第 3 行占剩余空间 */
• minmax() 函数: 定义轨道大小的最小值和最大值。
  css
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* 自动创建列，每列最小 200px 宽，最大占 1fr 的剩余空间 */

3. 定义网格区域 (grid-template-areas)

这个属性允许您通过命名来定义网格的逻辑区域，使得布局更具语义化和可读性。

css
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
在这个例子中，我们定义了一个头部、导航、主内容、侧边栏和底部区域。

放置网格项目

一旦网格结构定义完毕，就可以将网格项目放置到指定的区域。

1. 基于网格线放置

通过引用网格线的编号来定位项目。

• grid-column-start / grid-column-end: 指定项目开始和结束的垂直网格线。
• grid-row-start / grid-row-end: 指定项目开始和结束的水平网格线。
• 简写: grid-column: <start-line> / <end-line>; 和 grid-row: <start-line> / <end-line>;。
• span 关键字: 让项目跨越指定数量的轨道。

“`css
.item-a {
grid-column-start: 1;
grid-column-end: 3; / 从第一条线到第三条线，跨越两列 /
/ 简写：grid-column: 1 / 3; 或 grid-column: 1 / span 2; /
grid-row: 1 / 2; / 从第一条线到第二条线，跨越一行 /
/ 简写：grid-row: 1 / 2; 或 grid-row: 1; /
}

.item-b {
grid-column: 2 / span 2; / 从第二条线开始，跨越两列 /
grid-row: 2; / 放置在第二行 /
}
“`

2. 基于网格区域放置

如果您使用了 grid-template-areas 定义了命名区域，可以直接通过 grid-area 属性将项目放置到对应的区域。

css
header {
grid-area: header;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}

网格项目之间的间隙 (Gaps)

CSS Grid 提供了简洁的属性来创建网格轨道之间的间距（也称为 gutters）。

• gap (简写): 设置行间距和列间距。
  • gap: 20px;：行间距和列间距都是 20px。
  • gap: 10px 20px;：行间距 10px，列间距 20px。
• row-gap: 专门设置行间距。
• column-gap: 专门设置列间距。

注意: 旧的属性 grid-gap、grid-row-gap 和 grid-column-gap 仍然受支持，但推荐使用 gap 及其独立属性，因为它们是标准化的。

css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px; /* 所有行和列之间有 20px 间距 */
/* 或者：
row-gap: 15px;
column-gap: 30px;
*/
}

CSS Grid 中的对齐

CSS Grid 包含了 CSS 盒模型对齐（Box Alignment）模块，提供了强大的对齐功能，无论是对齐网格项目在其单元格内，还是对齐整个网格在其容器内。

1. 对齐网格项目 (在其各自的单元格内)

这些属性应用于网格容器，影响所有网格项目：

• justify-items: 沿行轴（inline axis）对齐网格项目。
• align-items: 沿块轴（block axis）对齐网格项目。
• place-items: align-items 和 justify-items 的简写。

这些属性应用于单个网格项目：

• justify-self: 沿行轴对齐单个网格项目。
• align-self: 沿块轴对齐单个网格项目。

常用值: start (起始位置), end (结束位置), center (居中), stretch (拉伸，默认值)。

“`css
.container {
display: grid;
justify-items: center; / 所有项目在单元格内水平居中 /
align-items: stretch; / 所有项目在单元格内垂直拉伸 /
}

.item-specific {
justify-self: end; / 此项目在单元格内水平靠右 /
align-self: center; / 此项目在单元格内垂直居中 /
}
“`

2. 对齐整个网格 (当网格小于其容器时)

这些属性应用于网格容器，影响整个网格在其容器内的位置：

• justify-content: 沿行轴对齐整个网格。
• align-content: 沿块轴对齐整个网格。
• place-content: align-content 和 justify-content 的简写。

常用值: start, end, center, stretch, space-around, space-between, space-evenly (均匀分布空间)。

css
.container {
display: grid;
grid-template-columns: repeat(2, 200px); /* 网格总宽度为 400px */
width: 600px; /* 容器宽度大于网格 */
justify-content: center; /* 整个网格在容器内水平居中 */
align-content: start; /* 整个网格在容器内垂直靠上 */
}

隐式网格与自动放置

CSS Grid 区分显式网格和隐式网格：

• 显式网格 (Explicit Grid): 您通过 grid-template-rows, grid-template-columns 和 grid-template-areas 明确定义的网格结构。
• 隐式网格 (Implicit Grid): 当网格项目多于显式定义的单元格，或者项目被放置到显式网格外部时，浏览器会自动创建的网格轨道。

控制隐式网格的属性：

• grid-auto-flow: 控制自动放置的项目如何填充网格。
  • row (默认): 项目按行填充。
  • column: 项目按列填充。
  • dense: 尝试回填网格中留下的任何空洞。
• grid-auto-rows / grid-auto-columns: 定义任何隐式创建的行或列轨道的大小。

css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px; /* 任何隐式创建的行高度为 100px */
grid-auto-flow: dense; /* 尝试更紧凑地填充网格 */
}

CSS Grid 的响应式设计能力

CSS Grid 天生就具备强大的响应式布局能力：

1. 媒体查询 (Media Queries): 在不同的屏幕尺寸下重新定义网格属性，以适应布局。
   “`css
   .container {
   display: grid;
   grid-template-columns: repeat(3, 1fr); / 桌面布局 /
   }

   @media (max-width: 768px) {
   .container {
   grid-template-columns: 1fr; / 小屏幕上变为单列 /
   }
   }
   2. **`fr` 单位**: 分数单位使您的网格能够自动适应可用空间。
3. **`minmax()` 结合 `auto-fit` / `auto-fill`**: 这是创建自适应、自动调整列数的网格的强大组合，无需为每个断点编写媒体查询。
* `auto-fit`: 会将项目拉伸以填满可用空间，当没有足够项目时，会压缩空轨道。
* `auto-fill`: 会填充容器，即使没有足够项目也会创建空的轨道。css
   .container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   / 自动创建列，每列最小 250px 宽，最大占 1fr。
   当空间足够时，会拉伸已有的列来填满行。 /
   }
   “`

浏览器支持

CSS Grid Layout 在所有现代浏览器中都得到了广泛支持，包括 Chrome、Firefox、Safari 和 Edge。对于需要支持旧版浏览器（如 Internet Explorer 10/11）的项目，可以使用 @supports 查询来提供回退布局。

总结

CSS Grid Layout 提供了一种直观且健壮的方式来构建复杂的、响应式的网页界面。通过理解其基本概念和灵活的属性，您可以以更少的代码和更高的灵活性创建出精密的布局。不断实践和探索其功能将极大地提升您的网页开发技能。开始拥抱 CSS Grid，让您的布局设计更上一层楼吧！

---