CSS网格布局是一种二维布局系统，能够同时处理行和列的排版需求，相比传统的浮动、定位布局，更适合实现复杂的页面结构。通过简单的属性设置，就可以快速搭建出整齐的网格结构，适配不同的页面设计需求。
网格布局的核心概念
在使用网格布局前，需要先了解两个核心概念：
- 网格容器（grid container）：通过设置display: grid的元素，是所有网格项目的父元素。
- 网格项目（grid item）：网格容器的直接子元素，会被自动放入网格的单元格中。
CSS设置网格布局的完整步骤
步骤1：创建网格容器
首先需要选中要作为网格布局的父元素，将其display属性设置为grid或者inline-grid，前者会生成块级网格容器，后者会生成行内网格容器，通常我们使用grid即可。
/* 选中类名为grid-box的元素作为网格容器 */
.grid-box {
display: grid;
/* 可选：设置容器宽度，避免内容溢出 */
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
步骤2：定义网格的行列轨道
创建容器后，需要定义网格的行和列的轨道大小，使用grid-template-columns定义列轨道，grid-template-rows定义行轨道。可以使用固定像素、百分比、fr单位（剩余空间分配单位）等作为值。
.grid-box {
display: grid;
/* 定义3列，每列宽度相等，各占剩余空间的1份 */
grid-template-columns: 1fr 1fr 1fr;
/* 定义2行，第一行高度100px，第二行高度自适应内容 */
grid-template-rows: 100px auto;
/* 可选：设置行列之间的间距 */
gap: 20px;
}
如果需要定义很多重复的轨道，可以使用repeat()函数简化写法，比如上面的列定义可以写成repeat(3, 1fr)。
步骤3：放置网格项目（可选）
默认情况下，网格项目会按照顺序排列到每个单元格中，如果需要自定义某个项目的位置，可以通过grid-column和grid-row属性设置，也可以给网格线命名后使用名称定位。
/* 让第一个网格项目占据第1到第3列，第1行 */
.grid-item:first-child {
grid-column: 1 / 3;
grid-row: 1 / 2;
background-color: #f0f0f0;
}
步骤4：添加网格项目内容
完成容器和轨道设置后，只需要在网格容器中放入直接子元素作为网格项目即可，这些元素会自动按照规则排列到网格中。
<div class="grid-box">
<div class="grid-item">项目1</div>
<div class="grid-item">项目2</div>
<div class="grid-item">项目3</div>
<div class="grid-item">项目4</div>
<div class="grid-item">项目5</div>
</div>
网格布局常用属性汇总
以下是网格布局中常用的属性说明，方便开发时快速查阅：
| 属性名 | 作用说明 | 常用取值 |
|---|---|---|
| display | 定义元素为网格容器 | grid, inline-grid |
| grid-template-columns | 定义列轨道的大小 | px, %, fr, repeat() |
| grid-template-rows | 定义行轨道的大小 | px, %, fr, repeat() |
| gap | 设置行列之间的间距 | px, rem等长度单位 |
| grid-column | 设置项目占据的列范围 | 起始线 / 结束线 |
| grid-row | 设置项目占据的行范围 | 起始线 / 结束线 |
注意事项
- 网格项目必须是网格容器的直接子元素，嵌套在子元素内的内容不会成为网格项目，不会参与网格布局。
- fr单位只在网格容器有剩余空间时才会生效，如果容器宽度被内容撑开，fr单位的分配会不符合预期。
- 如果定义的轨道数量少于网格项目数量，网格会自动创建隐式轨道来放置多余的项目，隐式轨道的大小可以通过grid-auto-rows和grid-auto-columns设置。
CSS_grid网格布局grid_containergrid_itemgrid_template修改时间：2026-07-18 06:30:24