CSSGrid跨列跨行技巧详解

CSS Grid 中的 `grid-column` 和 `grid-row` 是实现精准跨列跨行布局的核心利器，通过指定起始/结束网格线、使用 `span` 快速声明跨越数量、支持负值反向定位及命名线条等灵活语法，开发者能直观高效地构建响应式卡片、仪表盘、多栏表单等复杂界面；即使未预设足够轨道，Grid 也会自动创建隐式行或列来容纳内容，兼顾简洁性与强大表现力——掌握这些技巧，让网格布局真正“所想即所得”。

在使用 CSS Grid 布局时，grid-column 和 grid-row 是控制网格项跨越多列或多行的关键属性。它们让开发者可以灵活地定义元素在网格中的起始和结束位置，实现复杂的布局结构。

grid-column 控制跨列

通过 grid-column 可以指定一个元素从哪一列开始、到哪一列结束，从而实现横向跨列。

• grid-column: 起始线 / 结束线;
• 也可以使用 span 关键字表示跨越的轨道数量

例如：

.item {
  grid-column: 2 / 4; /* 从第2条线开始，到第4条线结束，占据2列 */
}
.full-width {
  grid-column: 1 / -1; /* 从第一列开始，到最后一条线，横跨整个容器 */
}
.wide {
  grid-column: span 3; /* 向前跨越3列，结束位置自动计算 */
}

grid-row 控制跨行

grid-row 的用法与 grid-column 相同，用于控制元素在垂直方向上跨越多少行。

.header {
  grid-row: 1 / 3; /* 占据第1行到第3行之间的空间（即跨2行） */
}
.sidebar {
  grid-row: span 2; /* 自动向上跨越2行 */
}

简写与隐式创建网格轨道

即使没有显式定义足够的行或列，Grid 容器也会自动创建隐式轨道来容纳跨越内容。

• 使用 span 能更直观表达“跨越几个单元格”
• 负值可用于从末尾反向计数，如 -1 表示最后一根线
• 命名线条也可用于提升可读性（配合 grid-template-columns/rows 使用）

基本上就这些。掌握 grid-column 和 grid-row 的跨度设置，就能轻松实现卡片布局、表单排版、仪表盘等复杂界面结构。不复杂但容易忽略的是线编号从1开始，且跨越行为不会影响其他项目的自动排列逻辑。

今天关于《CSSGrid跨列跨行技巧详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！