grid-column和grid-row用于控制子元素在网格中的行列跨度，支持数字或命名线指定起止位置，可实现复杂灵活的布局结构。
CSS Grid 布局中的 grid-column 和 grid-row 属性，用于控制子元素在网格容器中跨越多列或多行。它们是实现复杂布局的关键工具，使用起来直观且灵活。
grid-column 跨越列
grid-column 决定一个子元素从哪一列开始、到哪一列结束，可以跨越多个列。
语法：grid-column: 起始线 / 结束线; 也可以简写为 grid-column: 起始线 / span 跨越数量;
例如，让一个元素从第2列开始，跨越2列：
.item { grid-column: 2 / span 2;}
等价于：
立即学习“前端免费学习笔记（深入）”；
.item { grid-column: 2 / 4;}
grid-row 跨越多行
grid-row 控制元素在行方向上的位置和跨度。
语法与 grid-column 相同：grid-row: 起始行 / 结束行; 或 grid-row: 起始行 / span 行数;
比如让一个元素从第1行开始，跨3行：
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情
.item { grid-row: 1 / span 3;}
同时跨行和跨列
可以组合使用两个属性，实现“区域”式布局，比如一个卡片占据2列3行：
.card { grid-column: 2 / span 2; grid-row: 1 / span 3;}
这种写法适合仪表盘、相册、表单分组等需要不规则排列的场景。
使用 line names 提高可读性
除了数字，还可以在定义网格时命名行，使代码更清晰：
.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使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/997054.html
微信扫一扫 
支付宝扫一扫 
