CSSGrid跨列跨行实用技巧

想要掌握更强大的CSS布局技巧吗？本文将深入讲解CSS Grid布局中如何利用`grid-column`和`grid-row`属性实现元素的跨列和跨行，轻松构建复杂而灵活的网页结构。首先，通过`display: grid`启用Grid布局，并使用`grid-template`定义网格行列。接着，利用`grid-column`属性指定元素跨越的列数，例如`1 / 3`表示从第一列跨越到第三列。类似地，`grid-row`属性则控制元素在行方向上的跨度。更高级的技巧是结合`grid-column`和`grid-row`，实现元素在二维空间中的自由延展，或者使用`grid-area`简写属性，以“行起始/列起始/行结束/列结束”的格式快速定义元素的位置和大小。注意，网格线编号从1开始计数，而非0。掌握这些CSS Grid布局技巧，让你的网页设计更上一层楼！

通过grid-column和grid-row可直观控制元素跨列跨行；设置display: grid后，用grid-template定义行列，gap设间距；grid-column指定列起止线，如1/3跨两列，span 2自动跨列；grid-row同理控制行跨度；结合两者可实现二维扩展，或用grid-area简写为“行始/列始/行末/列末”；线号从1开始计数。

使用CSS Grid布局时，让元素跨列或跨行非常直观。通过grid-column和grid-row属性，可以精确控制网格项在网格容器中的位置和跨度。

定义网格容器

要启用Grid布局，先在父容器上设置display: grid，并用grid-template-columns和grid-template-rows划分行列结构。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px 50px;
  gap: 10px;
}

这会创建一个3×3的网格，每个单元格之间有10px的间距。

使用 grid-column 控制跨列

grid-column决定元素在列轴上的起始和结束位置。它可接受两个值：起始线和结束线，中间用斜杠分隔。

• grid-column: 1 / 3; 表示从第1条网格线开始，跨越到第3条线（占两列）
• grid-column: 2 / 4; 从第2列开始，跨到末尾前一列
• 也可简写为 grid-column: span 2; 表示自动向后跨2列

例如，让某个子元素横跨前两列：

.item-a {
  grid-column: 1 / 3;
}

使用 grid-row 控制跨行

grid-row作用与grid-column类似，但控制行方向。

• grid-row: 1 / 3; 从第1行开始，跨2行
• grid-row: span 2; 自动跨2行，起始位置由默认流决定
• grid-row: 2 / 4; 第2行到第4条线，覆盖中间两行

比如让一个元素纵向占据两行：

.item-b {
  grid-row: 2 / 4;
}

同时控制行列实现二维跨越

结合grid-column和grid-row，可以让元素在二维空间中自由伸展。

• 一个元素跨2列且跨2行：

.item-c {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

这个元素将从第2列第2行开始，向右下角扩展，覆盖四个原始单元格。

也可以使用简写形式grid-area来合并定义：

.item-c {
  grid-area: 2 / 2 / 4 / 4;
}

格式为：grid-area: 行起始 / 列起始 / 行结束 / 列结束

基本上就这些。掌握grid-column和grid-row的线号定位方式，就能灵活实现各种复杂的网格布局效果。不复杂但容易忽略的是线号从1开始计数，而不是0。

好了，本文到此结束，带大家了解了《CSSGrid跨列跨行实用技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！