css grid布局子元素跨行跨列方法-css教程-PHP中文网

css grid布局子元素跨行跨列方法

P粉602998670

发布： 2025-10-23 13:09:02

原创

196人浏览过

使用grid-column、grid-row和grid-area可实现CSS Grid子元素跨行跨列布局，分别控制列、行及行列范围，支持起止线和span语法，适用于仪表盘等复杂布局。

css grid布局子元素跨行跨列方法

在 CSS Grid 布局中，让子元素跨行或跨列非常直观，主要通过 grid-column 和 grid-row 属性来控制元素的跨度。也可以使用简写属性 grid-area 来同时定义行列起止位置。

1. 子元素跨列（横向跨越）

使用 grid-column 可以指定一个子元素从哪一列开始，到哪一列结束。

语法：

grid-column: 起始线 / 结束线;
也可以用 span 表示跨越几列

示例：

序列猴子开放平台

具有长序列、多模态、单模型、大数据等特点的超大规模语言模型

查看详情

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}
<p>.item {
grid-column: 1 / 3; /<em> 从第1条线开始，到第3条线结束，即占2列 </em>/
}
/<em> 或者 </em>/
.item {
grid-column: span 2; /<em> 占据2列，自动计算起始位置 </em>/
}</p>

登录后复制

2. 子元素跨行（纵向跨越）

使用 grid-row 控制元素在行方向上的跨度。

立即学习“前端免费学习笔记（深入）”；

语法：

grid-row: 起始线 / 结束线;
同样支持 span 写法

示例：

.item {
  grid-row: 2 / 4; /* 从第2行开始，到第4行前结束，占2行 */
}
/* 或者 */
.item {
  grid-row: span 3; /* 纵向跨越3行 */
}

登录后复制

3. 同时跨行和跨列（使用 grid-area）

当需要同时设置行列跨度时，可以用 grid-area 简写属性。

语法：

grid-area: 行起始 / 列起始 / 行结束 / 列结束;

示例：

.item {
  grid-area: 1 / 2 / 3 / 4;
  /* 第1行开始，第2列开始，第3行结束，第4列结束 */
}

登录后复制

这个元素将占据从第1行到第3行（跨2行），第2列到第4列（跨2列）的区域。

4. 实际布局示例

常见于仪表盘或卡片布局：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  gap: 10px;
}
<p>.header { grid-column: span 3; }        /<em> 横跨3列 </em>/
.sidebar { grid-row: span 2; }          /<em> 纵跨2行 </em>/
.main { grid-area: 2 / 2 / 4 / 4; }    /<em> 多维跨越 </em>/</p>

登录后复制

基本上就这些方法。掌握 grid-column、grid-row 和 grid-area 的使用，就能灵活实现各种跨行跨列布局，不复杂但容易忽略细节。

以上就是css grid布局子元素跨行跨列方法的详细内容，更多请关注php中文网其它相关文章！