引言
CSS Grid 是一种全新的布局方式，它可以让我们更加方便地构建灵活、响应式和复杂的布局结构。在 CSS Grid 中，网格被分成了行和列，并且每个网格单元格可以被定义为网格行和网格列中的一个或多个。
在这篇文章中，我们将深入了解如何使用 grid-row 和 grid-column 属性来控制网格项在网格布局中的位置。
grid-row 和 grid-column 属性
主要用于定义网格项的位置和范围。它们控制着网格项在网格中的行和列位置。
grid-row 属性
grid-row 属性用于指定一个网格项的行位置和跨越它的行数。
.grid-item {
grid-row: <start-line> / <end-line>;
}start-line 和 end-line 都是行号，可以是一个数字、关键字 span、或者是 minmax() 函数。
start-line指定了网格项所在的行号。end-line指定了网格项结束的行号。
例如，如果我们要将一个网格项放置在第 2 行，并跨越 2 行，则可以这样写：
.grid-item {
grid-row: 2 / span 2;
}注意：如果 end-line 的值省略，则默认跨越 1 行。
grid-column 属性
grid-column 属性用于指定一个网格项的列位置和跨越它的列数。
.grid-item {
grid-column: <start-line> / <end-line>;
}start-line 和 end-line 都是列号，可以是一个数字、关键字 span、或者是 minmax() 函数。
start-line指定了网格项所在的列号。end-line指定了网格项结束的列号。
例如，如果我们要将一个网格项放置在第 3 列，并跨越 3 列，则可以这样写：
.grid-item {
grid-column: 3 / span 3;
}同样地，如果 end-line 的值省略，则默认跨越 1 列。
示例代码
-- -------------------- ---- ------- ---- ----------------------- ---- ---------------- -------------- ---- ---------------- -------------- ---- ---------------- -------------- ---- ---------------- -------------- ---- ---------------- -------------- ---- ---------------- -------------- ---- ---------------- -------------- ---- ---------------- -------------- ---- ---------------- -------------- ------
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ------- --------- ----- - ---------- - ----------------- ----- ------- --- ----- ----- ---------- ----- ----------- ------- -------- ----- ---------------- ------- ------------ ------- - ------ - --------- - - ---- -- ------------ - - ---- -- - ------ - --------- - - ---- -- ------------ - - ---- -- - ------ - --------- - - ---- -- ------------ - - ---- -- - ------ - --------- - - ---- -- ------------ - - ---- -- - ------ - --------- - - ---- -- ------------ - - ---- -- - ------ - --------- - - ---- -- ------------ - - ---- -- - ------ - --------- - - ---- -- ------------ - - ---- -- - ------ - --------- - - ---- -- ------------ - - ---- -- - ------ - --------- - - ---- -- ------------ - - ---- -- -
上面的代码中，我们创建了一个 3x3 的网格布局，并定义了 9 个网格项。我们使用 grid-row 和 grid-column 属性来定义了每个网格项在网格中的位置。
运行以上代码，我们可以看到以下的结果：
结论
CSS Grid 布局可以让我们更加方便地定义网格布局，使用 grid-row 和 grid-column 属性可以轻松地控制网格项在网格中的位置。我们可以使用不同的行号和列号以及 span 和 minmax() 函数来定义网格项的位置和跨度。
希望本文对大家学习 CSS Grid 布局有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670caf825f551281025b62c3