CSS Grid是一种二维布局系统，能够同时控制行和列的排列，相比传统的Flexbox一维布局，更适合实现复杂的多列结构。通过定义网格容器和网格项，开发者可以灵活调整每个区域的位置和大小，满足多样化的页面设计需求。
CSS Grid基础概念
要使用CSS Grid实现布局，首先需要将容器设置为网格容器，核心属性是display: grid。网格容器内部直接子元素会成为网格项，我们可以通过相关属性定义网格的行、列以及网格项的位置。
核心属性说明
grid-template-columns：定义网格的列轨道，可设置固定值、百分比或弹性单位grid-template-rows：定义网格的行轨道，用法和列轨道类似grid-gap：设置网格行和列之间的间距，是row-gap和column-gap的简写grid-column：设置网格项占据的列范围，格式为起始线/结束线grid-row：设置网格项占据的行范围，格式和grid-column一致
基础多列布局实现
首先实现一个简单的三列等宽布局，整体容器宽度100%，三列各占30%左右，中间留有间距。
/* 网格容器样式 */
.grid-container {
display: grid;
/* 定义三列，每列占比1fr，fr是弹性单位，表示剩余空间分配比例 */
grid-template-columns: 1fr 1fr 1fr;
/* 列间距20px，行间距20px */
grid-gap: 20px;
padding: 20px;
background-color: #f5f5f5;
}
/* 网格项样式 */
.grid-item {
background-color: #4a90e2;
color: white;
padding: 30px;
text-align: center;
border-radius: 4px;
}对应的HTML结构如下：
<div class="grid-container">
<div class="grid-item">第一列</div>
<div class="grid-item">第二列</div>
<div class="grid-item">第三列</div>
</div>复杂多列布局案例
实现一个常见的页面布局结构，包含顶部导航、左侧边栏、主内容区、右侧边栏和底部footer，其中主内容区又分为两列子结构。
.page-container {
display: grid;
/* 定义列：左侧边栏200px，主内容区占剩余空间的2份，右侧边栏150px */
grid-template-columns: 200px 2fr 150px;
/* 定义行：导航60px，主内容区占剩余空间，footer 50px */
grid-template-rows: 60px 1fr 50px;
/* 整体高度占满视口 */
height: 100vh;
grid-gap: 10px;
}
/* 导航区域，占据第一行所有列 */
.header {
grid-column: 1 / 4;
background-color: #333;
color: white;
display: flex;
align-items: center;
padding: 0 20px;
}
/* 左侧边栏，占据第二行第一列 */
.sidebar-left {
background-color: #e8e8e8;
padding: 20px;
}
/* 主内容区，占据第二行第二列，内部再定义子网格 */
.main-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
padding: 20px;
}
/* 主内容区的子项 */
.main-item {
background-color: #f0f0f0;
padding: 15px;
border-radius: 4px;
}
/* 右侧边栏，占据第二行第三列 */
.sidebar-right {
background-color: #e8e8e8;
padding: 20px;
}
/* 底部区域，占据第三行所有列 */
.footer {
grid-column: 1 / 4;
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
}对应的HTML结构：
<div class="page-container">
<div class="header">顶部导航</div>
<div class="sidebar-left">左侧边栏</div>
<div class="main-content">
<div class="main-item">主内容子项1</div>
<div class="main-item">主内容子项2</div>
<div class="main-item">主内容子项3</div>
<div class="main-item">主内容子项4</div>
</div>
<div class="sidebar-right">右侧边栏</div>
<div class="footer">底部版权信息</div>
</div>布局技巧总结
- 使用
fr单位可以灵活分配剩余空间，避免计算固定像素的麻烦 - 通过
grid-column和grid-row可以跨列或跨行合并网格项，实现不规则布局 - 可以在网格项内部再嵌套网格容器，实现更复杂的嵌套布局结构
- 结合媒体查询可以修改
grid-template-columns的值，实现响应式多列布局
常见问题解答
网格项默认会拉伸填满所在网格区域吗
是的，默认情况下网格项的align-self和justify-self属性值为stretch，会填满整个网格区域，如果需要调整对齐方式可以修改这两个属性的值。
如何让网格项不按顺序排列
可以通过给网格项设置order属性，数值越小的网格项排列越靠前，默认所有网格项的order值为0。