CSS3 Grid网格布局详解：从入门到实战的二维布局系统

脚本专家

CSS3的Grid网格布局是当前最强大的二维布局系统，它能同时控制行和列，彻底解决了以往使用table、浮动、定位等Hack方式带来的布局痛点。本文将从基本概念到容器属性与项目属性的全面解析，带你掌握Grid布局的核心用法。

一、Grid网格布局的基本概念
Grid布局将容器划分为行和列，交叉形成单元格，每个网格项目可以精准定位到任意单元格。与Flexbox的一维轴线布局不同，Grid是为复杂的二维布局而生的CSS模块。

关键术语：
- 网格容器：设置display:grid或display:inline-grid的元素。
- 网格项目：网格容器内的直接子元素。
- 行和列：容器水平方向为行(row)，垂直方向为列(column)。
- 单元格：行与列的交叉区域。
- 网格线：划分行和列的线，可命名用于项目定位。

二、容器属性详解
1. display属性

2. .container {
3.   display: grid; /* 块级网格 */
4.   /* 或 inline-grid（行内网格） */
5.   /* 或 subgrid（嵌套网格） */
6. }

复制代码

注意：在grid容器上设置column、float、clear、vertical-align无效。

2. grid-template-columns / grid-template-rows
定义列宽和行高，值用空格分隔。

2. .container {
3.   display: grid;
4.   grid-template-rows: 100px 100px 100px;
5.   grid-template-columns: 100px 100px 100px;
6. }

复制代码

上述代码生成3行3列，行高和列宽均为100px。

3. repeat()函数
简化重复值，例如 repeat(3, 100px) 等同于 100px 100px 100px。

4. auto-fill 与 auto-fit
两者都会尽量生成更多的列或行，区别在于：
- auto-fill：即使单元格无内容也会保留空间，尽量填满容器。
- auto-fit：无内容的单元格列宽会被收缩为0，只保留有内容的单元格。

2. .container {
3.   grid-template-columns: repeat(auto-fill, 100px);
4. }

复制代码

实际应用中auto-fit更常用，因为它不会产生空白列。

5. fr关键字
fr表示片段，按比例分配剩余空间。例如1fr 2fr 3fr表示第二列是第一列的2倍，第三列是第一列的3倍。

6. minmax()和auto
- minmax(300px, 1fr)：列宽不小于300px，不大于1fr。
- auto：由浏览器自动决定，默认吸收剩余空间。
注意：当同时使用auto、fr、minmax时，优先级为 minmax > fr > auto。为保障最小空间，网格可能会超出容器。

7. 网格线命名
用方括号为网格线命名，项目可通过名称定位。

2. .container {
3.   grid-template-columns: [col-1] 100px [col-2] auto [col-3] 100px [col-4];
4.   grid-template-rows: [row-1] 100px [row-2] 100px [row-3] 100px [row-4];
5. }

复制代码

8. gap / row-gap / column-gap
设置行列间距。

2. .container {
3.   row-gap: 12px;
4.   column-gap: 12px;
5.   /* 简写：gap: 12px 12px; 或 gap: 12px;（行列相同） */
6. }

复制代码

9. grid-auto-flow
控制项目放置顺序，默认row（先行后列），可选column，以及row dense/column dense（密集填充）。

10. grid-template-areas
将单元格划分成命名区域，方便项目快速定位。

2. .container {
3.   grid-template-columns: repeat(3, 100px);
4.   grid-template-rows: repeat(3, 100px);
5.   grid-template-areas:
6.     "a b c"
7.     "d e f"
8.     "g h i";
9. }

复制代码

用点号表示空单元格。

11. justify-items / align-items / place-items
控制单元格内内容的水平/垂直对齐。

2. .container {
3.   justify-items: start | end | center | stretch;
4.   align-items: start | end | center | stretch;
5.   place-items: <align> <justify>; /* 只写一个值则两值相同 */
6. }

复制代码

12. justify-content / align-content / place-content
控制整个网格在容器中的对齐方式，与flexbox类似。

2. .container {
3.   justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
4.   align-content: ...;
5. }

复制代码

13. grid-auto-rows / grid-auto-columns
当项目超出定义的网格时，自动生成的行/列尺寸。

2. .container {
3.   grid-template-columns: repeat(3, 100px);
4.   grid-template-rows: repeat(3, 100px);
5.   grid-auto-rows: 100px; /* 自动生成的行的行高 */
6. }

复制代码

三、项目属性详解
1. grid-row-start / grid-row-end / grid-column-start / grid-column-end
通过网格线序号或名称定位项目。

2. .item1 {
3.   grid-row-start: 1;
4.   grid-row-end: 3;
5.   grid-column-start: 1;
6.   grid-column-end: 3;
7. }

复制代码

也可以使用span关键字表示跨越个数。

2. grid-row / grid-column
简写形式：

2. .item {
3.   grid-row: <start> / <end>;
4.   grid-column: <start> / <end>;
5. }

复制代码

3. grid-area
用于将项目放入命名区域：

2. .item {
3.   grid-area: header; /* 对应容器定义的区域名 */
4. }

复制代码

4. justify-self / align-self / place-self
与容器属性中的justify-items等类似，但仅作用于当前项目。

2. .item {
3.   justify-self: start | end | center | stretch;
4.   align-self: ...;
5. }

复制代码

四、其他实用属性
- z-index：当项目超出单元格与其他项目层叠时，控制层叠顺序。
- order：控制项目显示顺序，数值越小越靠前（与flexbox同）。

五、实战小结
Grid网格布局提供了最直观的二维定义方式，配合repeat、fr、命名区域等功能，能轻松实现常见的页面布局（如header/main/sidebar/footer）。建议在实际开发中优先使用Grid进行整体页面结构布局，内部局部细节可结合Flexbox使用。掌握以上容器属性和项目属性，即可应对绝大多数复杂布局需求。

热心网友4

感谢楼主的分享！这篇Grid布局的讲解非常系统，从基本术语到容器和项目属性都覆盖了，尤其对auto-fill和auto-fit的对比讲得很清楚，之前我一直混淆这两个的区别。另外，fr和minmax()的优先级说明也很实用，实际写布局时经常遇到空间分配的问题。我有个小问题想请教：在用grid-template-areas定义区域时，如果想让某个项目跨越多行或多列但形状不是矩形（比如L型），该怎么处理？另外，文中提到的subgrid在嵌套网格时具体怎么使用？希望能再指点一下。再次感谢，好帖已收藏！