如何使用css 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，把元素放在任意格子中。

立即学习“前端免费学习笔记（深入）”；

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

.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。

以上就是如何使用css grid-column和grid-row控制元素位置的详细内容，更多请关注php中文网其它相关文章！