CSSGrid跨行跨列实用技巧

本文深入讲解了CSS Grid中子元素跨行跨列的核心布局技巧，通过清晰对比grid-column（控制横向跨度）、grid-row（控制纵向跨度）和grid-area（一体化行列定位）三大属性的语法与实战用法，结合起止线编号、span关键字等灵活写法，并辅以仪表盘等真实场景示例，帮助开发者高效构建复杂响应式界面——看似简单的属性背后，藏着精准掌控网格空间的强大能力，是进阶CSS布局不可错过的实用指南。

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

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

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

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

示例：

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

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;
}
<p>.header { grid-column: span 3; }        /<em> 横跨3列 </em>/
.sidebar { grid-row: span 2; }          /<em> 纵跨2行 </em>/
.main { grid-area: 2 / 2 / 4 / 4; }    /<em> 多维跨越 </em>/</p>

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

理论要掌握，实操不能落！以上关于《CSSGrid跨行跨列实用技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！