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 引用方式，就能自由控制元素在网格中的位置和大小，构建出高度灵活的页面结构。

以上就是