grid-column和grid-row用于控制子元素在网格中的行列跨度，支持数字或命名线指定起止位置，可实现复杂灵活的布局结构。
CSS Grid 布局中的 grid-column 和 grid-row 属性，用于控制子元素在网格容器中跨越多列或多行。它们是实现复杂布局的关键工具，使用起来直观且灵活。
grid-column 决定一个子元素从哪一列开始、到哪一列结束，可以跨越多个列。
语法：例如，让一个元素从第2列开始，跨越2列：
.item {
grid-column: 2 / span 2;
}
等价于：
立即学习“前端免费学习笔记（深入）”；
.item {
grid-column: 2 / 4;
}
grid-row 控制元素在行方向上的位置和跨度。
语法与 grid-column 相同：比如让一个元素从第1行开始，跨3行：
.item {
grid-row: 1 / span 3;
}
可以组合使用两个属性，实现“区域”式布局，比如一个卡片占据2列3行：
.card {
grid-column: 2 / span 2;
grid-row: 1 / span 3;
}
这种写法适合仪表盘、相册、表单分组等需要不规则排列的场景。
除了数字，还可以在定义网格时命名行，使代码更清晰：
.container {
display: grid;
grid-template-columns: [sidebar] 1fr [content] 3fr [end];
grid-template-rows: [header] auto [main] 1fr [footer] auto;
}
.sidebar {
grid-column: sidebar / content;
grid-row: main / footer;
}
通过命名，布局意图更明确，便于维护。
基本上就这些。掌握 grid-column 和 grid-row 的 span 和 line 引用方式，就能自由控制元素在网格中的位置和大小，构建出高度灵活的页面结构。
以上就是css Grid子元素跨行跨列grid-column grid-row使用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
793
收藏
