Grid子元素如何跨行跨列_grid-row-span与grid-column-span解析

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Grid子元素如何跨行跨列_grid-row-span与grid-column-span解析

2025-11-25

浏览次数：次

返回列表

使用 grid-row 和 grid-column 配合 span 可实现子元素跨行跨列，如 grid-row: 2 / span 2；也可用 grid-area 简写，如 grid-area: 1 / 2 / span 2 / span 3，灵活控制布局范围。

grid子元素如何跨行跨列_grid-row-span与grid-column-span解析

在 CSS Grid 布局中，让子元素跨越多行或多列是常见需求。实现这一效果的关键属性是 grid-row 和 grid-column，而所谓的“grid-row-span”或“grid-column-span”并不是标准属性名，但可以通过 span 关键字来实现跨行跨列的效果。

使用 grid-row 和 grid-column 实现跨行跨列

CSS Grid 中并没有独立的 grid-row-span 或 grid-column-span 属性，但可以在 grid-row 和 grid-column 中使用 span 来指定跨越的轨道数量。

语法格式如下：

grid-row: / span ;
grid-column: / span ;

例如，让一个子元素从第2行开始，跨越2行：

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

这表示该元素从第2行开始，占据2行的高度（即覆盖第2行和第3行）。

简写形式：grid-area

如果需要同时设置行列的起始位置和跨度，可以使用 grid-area 简写属性。

语鲸

AI智能阅读辅助工具

314 查看详情

语法为：

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

也可以结合 span 使用：

grid-area: 1 / 2 / span 2 / span 3; —— 从第1行第2列开始，跨2行3列
grid-area: span 2 / span 2; —— 自动放置，但占据2行2列空间

实际示例

假设有一个 3×3 的网格布局：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
}
.box1 {
  grid-column: span 2;
  grid-row: span 2;
  background: lightblue;
}

上面的 .box1 会从默认起点开始，横向跨越2列，纵向跨越2行，占据左上角的 2×2 区域。

基本上就这些。通过 span 配合 grid-row、grid-column 或 grid-area，就能灵活控制子元素的跨行跨列布局，无需所谓“grid-row-span”这样的非标准属性。不复杂但容易忽略细节。

以上就是Grid子元素如何跨行跨列_grid-row-span与grid-column-span解析的详细内容，更多请关注其它相关文章！

# 可以使用 # 大冶网站建设策略 # 整形美容网站优化建议有哪些 # 市场营销策划推广内容 # 许昌整站seo网站优化工具 # 江西网站建设哪家有 # 专业的优化网站关键词 # seo宣传靠谱吗 # seo文章霸屏 # 海南网站建设营销方案 # google 英文 seo # css # 解决问题 # 中文网 # 可以通过 # 相关文章 # 就能 # 这一 # 不均匀 # 中不 # 跨行 # ai