使用grid-column和grid-row通过网格线控制跨列跨行，如grid-column:1/3表示从第1列线到第3列线跨越2列，配合span可实现从某位置跨越指定数量行列。
在CSS Grid布局中，让元素跨行或跨列并不使用 grid-row-span 或 grid-column-span 这样的属性——实际上这些属性并不存在。真正用于实现跨行跨列的是 grid-row 和 grid-column，或者更底层的 grid-row-start、grid-row-end、grid-column-start、grid-column-end。
最简洁的方式是通过 grid-column 和 grid-row 合并写法来指定元素占据的范围。
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 50px);
}
<p>.item {
grid-column: 1 / 3; /<em> 从第1列开始，跨越到第3列（占2列） </em>/
grid-row: 1 / 4; /<em> 从第1行开始，到第4行前（占3行） </em>/
}上面代码中，1 / 3 表示“起始线为1，结束线为3”，所以该元素横跨两列。同理，1 / 4 让它竖跨三行。
如果你需要更清晰地分开定义起始和结束位置，可以使用四个独立属性：
立即学习“前端免费学习笔记（深入）”；
.item {
grid-column-start: 2;
grid-column-end: 4; /* 跨两列 */
grid-row-start: 2;
grid-row-end: 3; /* 占一行高度，但从第2行开始 */
}想让一个元素从当前位置开始，跨越指定数量的行或列，可以用 span。
比如：.item {
grid-column: 2 / span 2; /* 从第2列开始，跨2列 */
grid-row: 1 / span 3; /* 从第1行开始，跨3行 */
}这种写法特别适合动态布局，不需要提前知道结束网格线编号。
基本上就这些。用 grid-column 和 grid-row 配合 / 和 span 就能灵活控制元素跨越行列，无需所谓的 grid-row-span 属性。关键理解“网格线”而不是“网格单元”的概念，就能轻松掌握。不复杂但容易忽略细节。基本上就这些。
以上就是如何在CSS中实现Grid元素跨行跨列_grid-row-span grid-column-span的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
390
收藏
