通过grid-column和grid-row属性可实现CSS Grid子元素跨行跨列布局，支持指定起始结束线或使用span定义跨越数量，如grid-column: 1 / span 2使元素从第1列开始跨越2列，结合网格线编号（从1开始）灵活控制二维布局。
CSS Grid 布局中的子元素可以轻松实现跨多列或多行的效果，这主要通过 grid-column 和 grid-row 属性来控制。你可以指定元素从哪一列或行开始，到哪一列或行结束，从而实现灵活的二维布局。
要让一个子元素跨越多列或多行，可以使用以下属性：
例如，让一个元素从第1列开始，跨越到第3列（即占两列），并从第1行到第3行（占两行）：
.item {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
如果你不想计算结束线，可以用 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 的网格，其中一个标题区域横跨顶部两列，一个侧边栏纵向占两行：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 10px;
}
<p>.header {
grid-column: 1 / 3;
background: #4CAF50;
}</p><p>.sidebar {
grid-row: 1 / 3;
background: #2196F3;
}</p>这样，.header 占据前两列第一行，.sidebar 从第一行延伸到第三行，其余元素会自动填充剩余空间。
基本上就这些。只要理解了网格线编号和 span 的用法，跨行跨列布局就很直观。不复杂但容易忽略的是线号从1开始计数，而不是0。
以上就是css Grid子元素跨多列多行布局的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
646
收藏
