CSS Grid布局通过定义网格容器和网格项，能高效实现复杂的二维页面布局，其中子元素的排列顺序、占据区域以及网格之间的间距都可以通过特定属性灵活控制。合理运用grid-gap、grid-row和grid-column属性，能大幅减少布局时的冗余代码，提升布局的可维护性。
grid-gap：控制网格间距
grid-gap是grid-row-gap和grid-column-gap的简写属性，用于设置网格行与行、列与列之间的间距，不需要再给子元素单独设置外边距来分隔。
基础语法
grid-gap可以接收一个或两个参数：
- 只传一个参数时，同时设置行间距和列间距
- 传两个参数时，第一个是行间距，第二个是列间距
需要注意的是，新版本的CSS规范已经将grid-gap重命名为gap，不过目前grid-gap仍然有广泛的浏览器支持，两者语法完全一致。
使用示例
下面是一个设置3列网格，行间距20px、列间距15px的示例：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 行间距20px，列间距15px */
grid-gap: 20px 15px;
}
.item {
background: #f0f0f0;
padding: 10px;
text-align: center;
}
grid-row与grid-column：控制子元素占据的网格区域
grid-row和grid-column分别用于指定网格项在行方向和列方向占据的网格线范围，从而控制子元素的排列位置和大小。
基础语法
两个属性的语法一致，都可以使用以下形式：
- 单个数字：表示起始网格线，结束网格线为起始值加1，比如
grid-column: 2表示占据第2条到第3条列网格线之间的区域 - 数字 / 数字：表示起始网格线和结束网格线，比如
grid-row: 1 / 3表示占据第1条到第3条行网格线之间的区域 - span 数字：表示跨越的网格数量，比如
grid-column: span 2表示占据2个列网格的宽度
排列控制示例
下面的示例定义了一个4列2行的网格，通过grid-row和grid-column调整子元素的排列：
.grid-box {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
/* 第一个元素占据第1行第1-3列 */
.item1 {
grid-row: 1;
grid-column: 1 / 3;
background: #ffcccc;
}
/* 第二个元素占据第1-2行第3列 */
.item2 {
grid-row: 1 / 3;
grid-column: 3;
background: #ccffcc;
}
/* 第三个元素占据第2行第1列，跨越2个列网格 */
.item3 {
grid-row: 2;
grid-column: span 2;
background: #ccccff;
}
对应的HTML结构如下：
<div class="grid-box">
<div class="item1">元素1</div>
<div class="item2">元素2</div>
<div class="item3">元素3</div>
</div>
常见注意事项
- 网格线的编号从1开始，默认从左到右、从上到下递增，也可以使用负数从右到左、从下到上编号，比如
grid-column: -1表示最后一个列网格线 - 如果设置的网格项范围超出容器定义的网格数量，浏览器会自动生成隐式网格来容纳元素，可能导致布局不符合预期
- gap属性不会影响网格容器和父容器之间的间距，也不会影响网格项的内边距和内容区域
- 当同时使用grid-area属性和grid-row、grid-column时，grid-row和grid-column的优先级更高
综合应用示例
下面是一个常见的卡片布局示例，使用Grid实现自适应列数，同时控制间距和特殊元素的排列：
.card-container {
display: grid;
/* 最小宽度200px，自动填充列 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 统一设置行和列间距为20px */
gap: 20px;
padding: 20px;
}
.card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 15px;
}
/* 第一个卡片占据2列宽度 */
.card:first-child {
grid-column: span 2;
}
这种写法可以让卡片在不同屏幕宽度下自动调整列数，第一个卡片始终占据两倍宽度，整体间距统一，不需要写媒体查询就能适配不同设备。
CSS_Gridgrid-gapgrid-rowgrid-column子元素排列修改时间：2026-07-21 12:57:24