grid布局是CSS中用于二维布局的强大工具，能够同时控制行和列的分布，非常适合处理既有固定排列需求又有动态排列需求的div布局场景。通过合理设置grid容器的属性和grid子项的属性，可以轻松实现不同排列规则的混合布局。
grid布局核心基础属性
要实现固定和动态排列的div布局，首先需要了解grid布局的几个核心属性：
- grid-template-columns：定义网格的列轨道大小，支持固定值、百分比、fr单位等
- grid-template-rows：定义网格的行轨道大小，用法和列轨道类似
- grid-auto-flow：控制自动布局的算法，可选row、column、dense等值
- grid-column/grid-row：用于指定单个grid子项占据的网格区域
固定排列div的实现方式
固定排列的div通常指位置、大小都明确固定的模块，我们可以通过给对应div设置明确的网格占位来实现。
比如要实现左侧固定200px宽度的侧边栏，右侧内容区动态分配剩余空间，同时顶部有一个固定高度的头部，结构如下：
<div class="grid-container"> <div class="header">固定头部</div> <div class="sidebar">固定侧边栏</div> <div class="main-content">动态内容区</div> </div>
对应的CSS样式可以这样写：
.grid-container {
display: grid;
/* 第一行固定60px高度，第二行自动填充剩余高度 */
grid-template-rows: 60px 1fr;
/* 第一列固定200px宽度，第二列分配剩余空间 */
grid-template-columns: 200px 1fr;
height: 100vh;
gap: 10px;
}
.header {
/* 头部占据第一行，跨两列 */
grid-row: 1 / 2;
grid-column: 1 / 3;
background-color: #f0f0f0;
}
.sidebar {
/* 侧边栏占据第二行第一列 */
grid-row: 2 / 3;
grid-column: 1 / 2;
background-color: #e0e0e0;
}
.main-content {
/* 内容区占据第二行第二列 */
grid-row: 2 / 3;
grid-column: 2 / 3;
background-color: #d0d0d0;
}
动态排列div的实现方式
动态排列的div通常指数量不固定，需要根据容器空间自动调整位置和大小的模块，这时候可以使用fr单位或者repeat函数配合auto-fit、auto-fill关键字来实现。
比如要实现一个卡片列表，前两个卡片固定宽度150px，后面的卡片动态分配剩余空间，自动换行：
<div class="dynamic-grid"> <div class="fixed-card">固定卡片1</div> <div class="fixed-card">固定卡片2</div> <div class="dynamic-card">动态卡片1</div> <div class="dynamic-card">动态卡片2</div> <div class="dynamic-card">动态卡片3</div> </div>
对应的CSS样式如下：
.dynamic-grid {
display: grid;
/* 前两列固定150px，后面的列自动分配剩余空间，最少100px */
grid-template-columns: 150px 150px repeat(auto-fit, minmax(100px, 1fr));
gap: 15px;
padding: 15px;
}
.fixed-card {
height: 120px;
background-color: #a0c4ff;
display: flex;
align-items: center;
justify-content: center;
}
.dynamic-card {
height: 120px;
background-color: #bdb2ff;
display: flex;
align-items: center;
justify-content: center;
}
固定与动态混合排列的常见场景
场景1：固定表头+动态内容表格
实现一个表格布局，表头固定高度和列宽，表格内容动态生成，自动换行：
<div class="table-grid"> <div class="table-header">姓名</div> <div class="table-header">年龄</div> <div class="table-header">地址</div> <div class="table-cell">张三</div> <div class="table-cell">25</div> <div class="table-cell">北京</div> <div class="table-cell">李四</div> <div class="table-cell">30</div> <div class="table-cell">上海</div> </div>
.table-grid {
display: grid;
/* 三列，前两列固定100px，第三列动态分配 */
grid-template-columns: 100px 100px 1fr;
gap: 1px;
background-color: #ccc;
}
.table-header {
background-color: #f5f5f5;
padding: 10px;
font-weight: bold;
text-align: center;
}
.table-cell {
background-color: #fff;
padding: 10px;
text-align: center;
}
场景2：固定底部栏+动态内容区
实现页面布局，顶部和底部固定高度，中间内容区动态填充，内容过多时自动滚动：
<div class="page-grid">
<div class="page-header">页面头部</div>
<div class="page-content">
<p>动态内容动态内容动态内容</p>
<p>动态内容动态内容动态内容</p>
</div>
<div class="page-footer">页面底部</div>
</div>
.page-grid {
display: grid;
grid-template-rows: 60px 1fr 50px;
height: 100vh;
}
.page-header {
background-color: #333;
color: #fff;
display: flex;
align-items: center;
padding: 0 20px;
}
.page-content {
padding: 20px;
overflow-y: auto;
}
.page-footer {
background-color: #333;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
注意事项
- 使用fr单位时，剩余空间是指容器减去固定大小轨道后的空间，多个fr会按比例分配剩余空间
- auto-fit和auto-fill的区别在于，auto-fit会折叠空的重复轨道，而auto-fill会保留空的重复轨道
- 如果给grid子项设置了明确的grid-column或grid-row，会覆盖自动布局的规则，适合固定排列的模块
- gap属性可以设置网格之间的间距，不会影响到网格容器和子项的padding、margin
通过灵活组合grid布局的这些属性，就可以轻松实现各种固定和动态排列的div布局需求，相比传统的float、flex布局，grid在处理复杂的二维混合布局时更加简洁高效。