CSS Grid 子元素跨行跨列技巧

掌握CSS Grid中grid-column、grid-row和grid-area三大属性的跨行跨列技巧，能让你轻松构建仪表盘、卡片式等复杂响应式布局——无论是用起止线精确定位，还是用span语法简洁声明跨度，亦或通过grid-area一键统合行列范围，这些直观而强大的能力让多维空间控制变得既灵活又可靠，是现代前端布局不可或缺的核心技能。

在 CSS Grid 布局中，让子元素跨行或跨列非常直观，主要通过 grid-column 和 grid-row 属性来控制元素的跨度。也可以使用简写属性 grid-area 来同时定义行列起止位置。

1. 子元素跨列（横向跨越）

使用 grid-column 可以指定一个子元素从哪一列开始，到哪一列结束。

• grid-column: 起始线 / 结束线;
• 也可以用 span 表示跨越几列

示例：

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}
.item {
grid-column: 1 / 3; / 从第1条线开始，到第3条线结束，即占2列 /
}
/ 或者 /
.item {
grid-column: span 2; / 占据2列，自动计算起始位置 /
}

2. 子元素跨行（纵向跨越）

使用 grid-row 控制元素在行方向上的跨度。

• grid-row: 起始线 / 结束线;
• 同样支持 span 写法

示例：

.item {
  grid-row: 2 / 4; /* 从第2行开始，到第4行前结束，占2行 */
}
/* 或者 */
.item {
  grid-row: span 3; /* 纵向跨越3行 */
}

3. 同时跨行和跨列（使用 grid-area）

当需要同时设置行列跨度时，可以用 grid-area 简写属性。

• grid-area: 行起始 / 列起始 / 行结束 / 列结束;

示例：

.item {
  grid-area: 1 / 2 / 3 / 4;
  /* 第1行开始，第2列开始，第3行结束，第4列结束 */
}

这个元素将占据从第1行到第3行（跨2行），第2列到第4列（跨2列）的区域。

4. 实际布局示例

常见于仪表盘或卡片布局：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  gap: 10px;
}
.header { grid-column: span 3; }        / 横跨3列 /
.sidebar { grid-row: span 2; }          / 纵跨2行 /
.main { grid-area: 2 / 2 / 4 / 4; }    / 多维跨越 /

基本上就这些方法。掌握 grid-column、grid-row 和 grid-area 的使用，就能灵活实现各种跨行跨列布局，不复杂但容易忽略细节。

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