css网格布局子元素跨行跨列应用

css网格布局通过 grid-column和 grid-row 实现子元素跨行跨列。先设置容器display: grid 定义行列结构，再用 grid-column 指定元素横向跨度，如 1 / 3 或 span 2 实现跨两列；用 grid-row 设置纵向跨度，如 2 / 4 或 span 2 跨两行；二者结合可创建大区块，常用于仪表盘或首页布局，提升网页二维布局灵活性与效率。

CSS 网格布局（Grid Layout）让网页的二维布局变得非常灵活，尤其适合需要子元素跨行或跨列的复杂结构。通过 grid-column 和 grid-row 属性，可以轻松实现子元素跨越多列或多行。

基本网格容器设置

要使用网格布局，先定义一个容器为 display: grid，并设置行列结构：

.container {display: grid;   grid-template-columns: 1fr 1fr 1fr; /* 三列 */   grid-template-rows: 100px 100px 100px; /* 三行 */   gap: 10px;}

让子元素跨列

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

例如，让第一个子元素横跨前两列：

.item1 {grid-column: 1 / 3; /* 从第 1 列开始，到第 3 列之前（即跨 2 列）*/}

也可以用 span 简化写法：

.item1 {grid-column: span 2; /* 向右跨 2 列 */}

让子元素跨行

使用 grid-row 实现纵向跨越。

比如让某个元素占据第二行和第三行：

AppMall 应用商店

AI 应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

.item2 {grid-row: 2 / 4; /* 从第 2 行开始，到第 4 行之前（跨 2 行）*/}

同样可用 span：

.item2 {grid-row: span 2;}

同时跨行和跨列（创建大区块）

在仪表盘、卡片布局中很常见，一个元素占据多个格子。

例如创建一个左上角的大区域：

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

.hero {grid-column: 1 / 3; /* 横跨两列 */   grid-row: 1 / 3;    /* 纵跨两行 */}

这常用于首页主图、侧边栏整合等场景。

基本上就这些。只要掌握 grid-column 和 grid-row 的起止写法或 span 语法，就能自由控制元素在网格中的范围，布局更高效直观。

以上就是