CSSGrid跨行跨列实用技巧

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《CSS Grid子元素跨行跨列技巧》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

使用grid-column、grid-row和grid-area可实现CSS Grid子元素跨行跨列布局，分别控制列、行及行列范围，支持起止线和span语法，适用于仪表盘等复杂布局。

在 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学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！