CSSGrid多列多行布局技巧详解

掌握CSS Grid布局，轻松实现跨行跨列布局！本文深入解析`grid-column`和`grid-row`属性，助你灵活控制网格子元素的位置与尺寸。通过指定起始和结束网格线，或利用`span`关键字定义跨越的行列数量，例如`grid-column: 1 / span 2`，即可让元素从第一列开始跨越两列。文章提供详细的代码示例，展示如何在实际项目中应用这些技巧，创建复杂的二维布局。了解网格线编号从1开始计数这一关键点，让你在CSS Grid的世界里游刃有余，打造更具吸引力的网页布局。立即学习，提升你的CSS Grid技能！

通过grid-column和grid-row属性可实现CSS Grid子元素跨行跨列布局，支持指定起始结束线或使用span定义跨越数量，如grid-column: 1 / span 2使元素从第1列开始跨越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;
}
.header {
grid-column: 1 / 3;
background: #4CAF50;
}
.sidebar {
grid-row: 1 / 3;
background: #2196F3;
}

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

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

以上就是《CSSGrid多列多行布局技巧详解》的详细内容，更多关于的资料请关注golang学习网公众号！