grid-column 和 grid-row 用于控制网格项的跨列跨行布局，通过起始线/结束线或 span 设置跨越范围，支持隐式轨道创建与负值反向计数，结合命名线条提升可读性，实现复杂界面布局。
在使用 CSS Grid 布局时，grid-column 和 grid-row 是控制网格项跨越多列或多行的关键属性。它们让开发者可以灵活地定义元素在网格中的起始和结束位置，实现复杂的布局结构。
通过 grid-column 可以指定一个元素从哪一列开始、到哪一列结束，从而实现横向跨列。
语法：例如：
.item {
grid-column: 2 / 4; /* 从第2条线开始，到第4条线结束，占据2列 */
}
.full-width {
grid-column: 1 / -1; /* 从第一列开始，到最后一条线，横跨整个容器 */
}
.wide {
grid-column: span 3; /* 向前跨越3列，结束位置自动计算 */
}
grid-row 的用法与 grid-column 相同，用于控制元素在垂直方向上跨越多少行。
立即学习“前端免费学习笔记（深入）”；
示例：
.header {
grid-row: 1 / 3; /* 占据第1行到第3行之间的空间（即跨2行） */
}
.sidebar {
grid-row: span 2; /* 自动向上跨越2行 */
}
即使没有显式定义足够的行或列，Grid 容器也会自动创建隐式轨道来容纳跨越内容。
-1 表示最后一根线基本上就这些。掌握 grid-column 和 grid-row 的跨度设置，就能轻松实现卡片布局、表单排版、仪表盘等复杂界面结构。不复杂但容易忽略的是线编号从1开始，且跨越行为不会影响其他项目的自动排列逻辑。
以上就是CSS Grid如何控制元素跨列跨行_grid-column和grid-row设置跨度的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
121
收藏
