css Grid子元素跨行跨列grid-column grid-row使用

grid-column和 grid-row 用于控制子元素在网格中的行列跨度，支持数字或命名线指定起止位置，可实现复杂灵活的布局结构。

css Grid 布局中的 grid-column 和 grid-row 属性，用于控制子元素在网格容器中跨越多列或多行。它们是实现复杂布局的关键 工具，使用起来直观且灵活。

grid-column 跨越列

grid-column 决定一个子元素从哪一列开始、到哪一列结束，可以跨越多个列。

语法：

• grid-column: 起始线 / 结束线；
• 也可以简写为 grid-column: 起始线 / span 跨越数量；

例如，让一个元素从第 2 列开始，跨越 2 列：

.item {grid-column: 2 / span 2;}

等价于：

立即学习 “ 前端免费学习笔记（深入）”；

.item {grid-column: 2 / 4;}

grid-row 跨越多行

grid-row 控制元素在行方向上的位置和跨度。

语法与 grid-column 相同：

• grid-row: 起始行 / 结束行；
• 或 grid-row: 起始行 / span 行数；

比如让一个元素从第 1 行开始，跨 3 行：

序列猴子开放平台

具有长序列、多模态、单模型、大数据等特点的超大规模语言模型

0

查看详情

.item {grid-row: 1 / span 3;}

同时跨行和跨列

可以组合使用两个属性，实现“区域”式布局，比如一个卡片占据 2 列 3 行：

.card {grid-column: 2 / span 2;   grid-row: 1 / span 3;}

这种写法适合仪表盘、相册、表单分组等需要不规则 排列 的场景。

使用 line names 提高可读性

除了数字，还可以在定义网格时命名行，使代码更清晰：

.container {display: grid;   grid-template-columns: [sidebar] 1fr [content] 3fr [end];   grid-template-rows: [header] auto [main] 1fr [footer] auto; } .sidebar {grid-column: sidebar / content;   grid-row: main / footer;}

通过命名，布局意图更明确，便于维护。

基本上就这些。掌握 grid-column 和 grid-row 的 span 和 line 引用方式，就能自由控制元素在网格中的位置和大小，构建出高度灵活的页面结构。

以上就是