CSS Grid 比传统表格更灵活，适合复杂布局。通过 display: grid 定义容器，grid-template-columns 和 grid-template-rows 设置行列，可用 grid-column、grid-row 实现跨行跨列。推荐使用 grid-template-areas 命名区域，提升可读性，如 header、sidebar、main 等区域可视化布局。结合 gap 设置间距，minmax() 与 auto-fit 实现响应式，屏幕变窄时自动调整列数。适用于仪表盘、报表等场景，关键在于合理规划网格结构与响应行为，注意对齐与间隙细节处理。
使用 CSS Grid 实现复杂表格布局比传统 HTML 表格更灵活，尤其适合需要跨行、跨列或非线性排列的场景。Grid 能精确控制每一行、每一列的位置和尺寸，适合仪表盘、排版复杂的报表等。
定义基本网格容器
将容器设置为 display: grid，并用 grid-template-columns 和 grid-template-rows 定义行列结构。
.container {
display: grid;
grid-template-columns: 100px 1fr 2fr;
grid-template-rows: 50px auto 100px;
gap: 10px;
}
display: grid;
grid-template-columns: 100px 1fr 2fr;
grid-template-rows: 50px auto 100px;
gap: 10px;
}
上面代码创建了一个 3×3 的网格，第一列为固定宽度，后两列按比例分配剩余空间。
使用 grid-column 和 grid-row 控制单元格跨度
通过 grid-column 和 grid-row 让某个元素跨越多列或多行，类似
colspan和
rowspan。
立即学习“前端免费学习笔记（深入）”；
.header {
grid-column: 1 / 4;
grid-row: 1;
}
.sidebar {
grid-column: 1;
grid-row: 2 / 4;
}
.content {
grid-column: 2 / 4;
grid-row: 2;
}
.footer {
grid-column: 2 / 4;
grid-row: 3;
}
grid-column: 1 / 4;
grid-row: 1;
}
.sidebar {
grid-column: 1;
grid-row: 2 / 4;
}
.content {
grid-column: 2 / 4;
grid-row: 2;
}
.footer {
grid-column: 2 / 4;
grid-row: 3;
}
这样可以轻松实现一个带页头、侧边栏、内容区和页脚的复杂表格式布局，无需嵌套或 JavaScript。
命名区域简化布局（推荐）
使用 grid-template-areas 可视化地定义布局结构，提高可读性。
.container {
display: grid;
grid-template-columns: 150px 1fr 1fr;
grid-template-rows: 60px 1fr 80px;
grid-template-areas:
"header header header"
"sidebar main chart"
"footer footer footer";
gap: 10px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.chart { grid-area: chart; }
.footer { grid-area: footer; }
display: grid;
grid-template-columns: 150px 1fr 1fr;
grid-template-rows: 60px 1fr 80px;
grid-template-areas:
"header header header"
"sidebar main chart"
"footer footer footer";
gap: 10px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.chart { grid-area: chart; }
.footer { grid-area: footer; }
这种方式像画地图一样设计布局，特别适合复杂数据面板或后台管理界面。
处理动态内容与响应式调整
在实际项目中，表格内容可能变化，可通过媒体查询或 minmax()、auto-fit 实现自适应。
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
当屏幕变窄时，列会自动换行并调整宽度，保持可读性。也可结合 @media 修改
grid-template-areas适配移动端。
基本上就这些。Grid 提供了远超传统 table 的控制力，合理使用能高效构建复杂表格布局，关键是规划好区域划分和响应行为。不复杂但容易忽略细节对齐和间隙处理。
