如何用css grid实现复杂表格布局-css教程-PHP中文网

如何用css grid实现复杂表格布局

P粉602998670

发布： 2025-09-16 22:14:02

原创

431人浏览过

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实现复杂表格布局

使用 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;
}

上面代码创建了一个 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;
}

这样可以轻松实现一个带页头、侧边栏、内容区和页脚的复杂表格式布局，无需嵌套或 JavaScript。

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

命名区域简化布局（推荐）

使用 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; }

这种方式像画地图一样设计布局，特别适合复杂数据面板或后台管理界面。