grid-column和grid-row用于精确控制网格元素位置，前者定义列区间，后者定义行区间，支持数字线号、span跨越及自定义线名，结合使用可精准定位元素并提升布局灵活性。
CSS Grid 布局中的 grid-column 和 grid-row 属性，是用来精确控制网格元素在行和列中位置的强大工具。它们能让你跳过复杂的定位或浮动，直接指定元素跨越哪一列或哪一行。
理解 grid-column 的用法
grid-column 决定元素在网格中的横向位置，可以指定起始线和结束线。
常见写法：- grid-column: 2 / 4; — 元素从第2条垂直线开始，到第4条结束，占据两列宽度。
-
grid-column: 1; — 等同于
grid-column: 1 / 2;，元素只占第一列。 - grid-column: span 2; — 从当前位置向右跨越2列。
- grid-column: span 2 / -1; — 向左跨越2列，直到最后一列。
理解 grid-row 的用法
grid-row 控制元素在纵向（行）上的位置，语法与 grid-column 相同。
- grid-row: 3 / 5; — 元素从第3行开始，跨到第5行前，占两行高度。
- grid-row: 1; — 只出现在第1行。
- grid-row: span 3; — 从当前行向下跨3行。
结合使用实现精准布局
你可以同时设置 grid-column 和 grid-row，把元素放在任意格子中。
立即学习“前端免费学习笔记（深入）”；
例如：
.item {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
这个元素会从第2列开始，跨到第4列前；同时从第1行开始，跨到第3行前，形成一个2×2的区域。
使用 line names 提高可读性
除了数字，你还能为网格线命名，让代码更清晰。
.container {
display: grid;
grid-template-columns: [start] 1fr [content] 1fr [end];
grid-template-rows: [header-start] auto [main-start] auto [footer-end];
}
.sidebar {
grid-column: start / content;
grid-row: main-start;
}
通过命名线条，CSS 更易维护，尤其在复杂布局中。
基本上就这些。掌握 grid-column 和 grid-row 能让你轻松控制每个元素的位置和跨度，是 Grid 布局的核心技巧之一。不复杂但容易忽略细节，比如线号是从1开始，而不是0。
