CSSGrid布局：grid-column和grid-row全解析

想要精准控制网页布局？CSS Grid 布局中的 `grid-column` 和 `grid-row` 属性是你的利器！本文详解 `grid-column` 和 `grid-row` 的用法，助你轻松掌握网格元素在行和列中的定位技巧。`grid-column` 用于定义元素占据的列区间，`grid-row` 则定义行区间，支持数字线号、`span` 跨越以及自定义线名，灵活运用可实现元素的精确定位。通过结合使用 `grid-column` 和 `grid-row`，你可以轻松打造出复杂而美观的网页布局，提升用户体验，快来学习吧！

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。

今天关于《CSSGrid布局：grid-column和grid-row全解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！