CSS Grid网格布局基础是什么？如何快速掌握使用方法

CSS Grid网格布局是CSS提供的原生二维布局系统，它允许开发者将页面划分为行和列组成的网格，直接在网格内放置和调整元素的位置，相比传统的浮动、定位布局，在处理复杂多列多行布局时更加灵活高效，能够大幅减少额外的HTML结构和CSS hack代码。

CSS Grid核心概念

在使用Grid布局前，需要先理解几个核心基础概念，这些是后续属性使用的基础。

网格容器（grid container）

当一个元素的display属性设置为grid或者inline-grid时，这个元素就成为了网格容器，它的直接子元素会自动成为网格项。

网格项（grid item）

网格容器的直接子元素就是网格项，网格项可以放置在网格的任意单元格中，也可以通过属性设置跨多个行或列。

网格线（grid line）

组成网格的横线或者竖线就是网格线，网格线从1开始计数，也可以通过自定义名称来引用。

网格轨道（grid track）

相邻两条网格线之间的区域就是网格轨道，分为行轨道和列轨道，对应网格的行和列。

网格单元格（grid cell）

行轨道和列轨道交叉形成的单个区域就是网格单元格，是网格的最小组成单位。

网格区域（grid area）

由任意数量的网格单元格组成的矩形区域就是网格区域，一个网格项可以占据一个或者多个网格区域。

常用网格容器属性

网格容器上的属性用于定义整个网格的结构，下面是开发中最常用的几个属性。

display

定义元素为网格容器，取值为grid时生成块级网格容器，取值为inline-grid时生成行内网格容器。

/* 块级网格容器 */
.container {
    display: grid;
}
/* 行内网格容器 */
.inline-container {
    display: inline-grid;
}

grid-template-columns / grid-template-rows

这两个属性分别用于定义列轨道和行轨道的大小，取值可以是像素、百分比、fr单位等，fr单位表示剩余空间的分配比例。

.container {
    display: grid;
    /* 定义3列，第一列200px，第二列占剩余空间的1份，第三列占剩余空间的2份 */
    grid-template-columns: 200px 1fr 2fr;
    /* 定义2行，第一行100px，第二行自适应内容高度 */
    grid-template-rows: 100px auto;
}

gap

用于设置网格项之间的间距，是row-gap和column-gap的简写属性，取值为单个值时同时设置行和列的间距，两个值时第一个是行间距，第二个是列间距。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 网格项之间行和列间距都是20px */
    gap: 20px;
    /* 等价于上面的写法 */
    /* row-gap: 20px;
    column-gap: 20px; */
}

justify-items / align-items

justify-items设置网格项在列方向上的对齐方式，align-items设置网格项在行方向上的对齐方式，取值有start、end、center、stretch，默认是stretch拉伸填满轨道。

.container {
    display: grid;
    grid-template-columns: repeat(2, 200px);
    /* 网格项水平居中 */
    justify-items: center;
    /* 网格项垂直居中 */
    align-items: center;
}

justify-content / align-content

当网格的总大小小于网格容器的大小时，这两个属性用于设置整个网格在容器内的对齐方式，justify-content控制水平方向，align-content控制垂直方向，常用取值有start、end、center、space-between、space-around、space-evenly。

.container {
    display: grid;
    grid-template-columns: repeat(3, 150px);
    width: 800px;
    height: 400px;
    /* 网格整体水平居中 */
    justify-content: center;
    /* 网格整体垂直居中 */
    align-content: center;
}

常用网格项属性

网格项上的属性用于单独控制某个网格项的位置和大小，覆盖容器的默认设置。

grid-column / grid-row

这两个属性用于指定网格项占据的网格线范围，grid-column是grid-column-start和grid-column-end的简写，grid-row是grid-row-start和grid-row-end的简写，取值可以是网格线编号，也可以用span表示跨几个轨道。

.item1 {
    /* 占据从第1条列网格线到第3条列网格线，即跨2列 */
    grid-column: 1 / 3;
    /* 占据从第1条行网格线到第2条行网格线，即1行 */
    grid-row: 1 / 2;
}
.item2 {
    /* 跨2列 */
    grid-column: span 2;
    /* 跨1行 */
    grid-row: span 1;
}

grid-area

可以给网格项指定一个名称，然后在容器的grid-template-areas属性中定义网格区域的布局，也可以直接作为grid-row-start、grid-column-start、grid-row-end、grid-column-end的简写。

/* 容器定义区域布局 */
.container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 1fr 60px;
    /* 定义区域：头部占满第一行，侧边栏占第二行第一列，内容占第二行第二列，底部占满第三行 */
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}
/* 网格项关联区域 */
.header {
    grid-area: header;
}
.sidebar {
    grid-area: sidebar;
}
.main {
    grid-area: main;
}
.footer {
    grid-area: footer;
}

justify-self / align-self

单独设置某个网格项在列方向和行方向上的对齐方式，覆盖容器的justify-items和align-items设置，取值和容器对应属性一致。

.item {
    /* 该网格项水平方向靠起始位置对齐 */
    justify-self: start;
    /* 该网格项垂直方向靠结束位置对齐 */
    align-self: end;
}

常见布局示例

下面通过两个常见的布局场景，展示Grid布局的实际使用方式。

等宽三列布局

实现三列等宽，中间间距20px的布局，代码如下：

.three-col {
    display: grid;
    /* 3列，每列占剩余空间的1份，即等宽 */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}
.three-col .col {
    height: 200px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="three-col">
    <div class="col">第一列</div>
    <div class="col">第二列</div>
    <div class="col">第三列</div>
</div>

圣杯布局

经典的圣杯布局包含头部、侧边栏、主内容区、底部，代码如下：

.holy-grail {
    display: grid;
    grid-template-columns: 200px 1fr 150px;
    grid-template-rows: 80px 1fr 60px;
    height: 100vh;
    grid-template-areas:
        "header header header"
        "left main right"
        "footer footer footer";
    gap: 10px;
}
.header {
    grid-area: header;
    background-color: #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.left {
    grid-area: left;
    background-color: #eeeeee;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main {
    grid-area: main;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.right {
    grid-area: right;
    background-color: #eeeeee;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer {
    grid-area: footer;
    background-color: #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="holy-grail">
    <div class="header">头部</div>
    <div class="left">左侧边栏</div>
    <div class="main">主内容区</div>
    <div class="right">右侧边栏</div>
    <div class="footer">底部</div>
</div>

使用注意事项

• Grid布局是二维布局，适合同时控制行和列的场景，Flexbox是一维布局，适合单行或者单列的场景，两者可以结合使用。
• fr单位只能用在grid-template-columns和grid-template-rows中，不能用于其他属性。
• 网格线的编号从1开始，如果需要反向计数，可以使用负数，比如-1表示最后一条网格线。
• 旧版本浏览器对Grid布局的支持度有限，如果需要兼容旧浏览器，需要添加对应的前缀或者降级方案。

CSS_Grid网格布局grid_containergrid_itemgrid_template修改时间：2026-06-25 11:48:38