CSSGrid跨行跨列实用技巧

掌握CSS Grid的跨列跨行布局技巧，能让你轻松实现灵活、精准的二维网页结构——通过`grid-column`和`grid-row`属性，既可指定起始与结束网格线（如`1 / 3`），也能用`span`语法直观定义跨越数量（如`span 2`），配合从1开始的网格线编号规则，无需复杂计算即可让标题横跨多列、侧边栏纵贯多行，让响应式布局变得简洁高效又极具表现力。

CSS Grid 布局中的子元素可以轻松实现跨多列或多行的效果，这主要通过 grid-column 和 grid-row 属性来控制。你可以指定元素从哪一列或行开始，到哪一列或行结束，从而实现灵活的二维布局。

1. 使用 grid-column 和 grid-row 跨列跨行

要让一个子元素跨越多列或多行，可以使用以下属性：

例如，让一个元素从第1列开始，跨越到第3列（即占两列），并从第1行到第3行（占两行）：

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

2. 使用 span 简化写法

如果你不想计算结束线，可以用 span 来指定跨越的网格数量。

.item {
  grid-column: 1 / span 2;  /* 从第1列开始，跨越2列 */
  grid-row: 1 / span 2;     /* 从第1行开始，跨越2行 */
}

也可以简写为：

.item {
  grid-column: span 2;
  grid-row: span 2;
}

此时会自动从当前可用的起始位置开始占位。

3. 实际布局示例

假设我们要创建一个 3×3 的网格，其中一个标题区域横跨顶部两列，一个侧边栏纵向占两行：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 10px;
}
<p>.header {
grid-column: 1 / 3;
background: #4CAF50;
}</p><p>.sidebar {
grid-row: 1 / 3;
background: #2196F3;
}</p>

这样，.header 占据前两列第一行，.sidebar 从第一行延伸到第三行，其余元素会自动填充剩余空间。

基本上就这些。只要理解了网格线编号和 span 的用法，跨行跨列布局就很直观。不复杂但容易忽略的是线号从1开始计数，而不是0。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSSGrid跨行跨列实用技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。