如何在CSS中使用Grid实现元素跨列跨行布局_grid-column grid-row组合控制

通过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类似，但控制行方向。

CodeSquire

AI代码编写助手，把你的想法变成代码

103

查看详情

• 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。

以上就是如何在CSS中使用Grid实现元素跨列跨行布局_grid-column grid-row组合控制的详细内容，更多请关注php中文网其它相关文章！