CSSGrid跨列跨行实用技巧

CSS Grid布局是现代网页设计中强大的工具，本文深入探讨了如何利用CSS Grid实现元素的跨列跨行布局。通过设置`display: grid`，并使用`grid-template-columns`和`grid-template-rows`定义网格结构，您可以轻松创建灵活的网格系统。文章重点讲解了`grid-column`和`grid-row`属性，它们允许您精确控制元素在网格中的位置和跨度，通过指定起始和结束线号，或者使用`span`关键字，可以实现各种复杂的布局效果。此外，还介绍了`grid-area`简写方式，方便您同时控制元素的行和列跨度。掌握这些技巧，您将能更有效地运用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。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~