CSS Grid 是一种强大的布局系统，可以让我们更容易地设计网页布局。在使用 CSS Grid 时，我们可以通过指定项目的起始和结束网格行列来精确控制布局。本文将详细介绍如何在 CSS Grid 中指定项目的起始和结束网格行列，以及如何使用这些属性来创建复杂的布局。
grid-row-start 和 grid-row-end 属性
CSS Grid 中的每个项目都可以跨越多个网格行和列。我们可以使用 grid-row-start 和 grid-row-end 属性来指定项目跨越的网格行。这两个属性的值可以是一个数字，表示项目跨越的网格行数；也可以是一个关键字，表示项目跨越的特定网格行。
以下示例代码演示了如何使用 grid-row-start 和 grid-row-end 属性来指定项目跨越的网格行：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- --------- ----- - ----- - --------------- -- ------------- -- -
在上面的代码中，我们创建了一个包含三列的网格容器，并指定了每列的宽度。我们还创建了一个项目，并使用 grid-row-start 和 grid-row-end 属性将其跨越第一行和第二行。这意味着该项目将占据第一列的第一行、第二行和第三列的第一行、第二行。
grid-column-start 和 grid-column-end 属性
类似地，我们可以使用 grid-column-start 和 grid-column-end 属性来指定项目跨越的网格列。这两个属性的值也可以是一个数字或一个关键字。
以下示例代码演示了如何使用 grid-column-start 和 grid-column-end 属性来指定项目跨越的网格列：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- --------- ----- - ----- - ------------------ -- ---------------- -- -
在上面的代码中，我们创建了一个包含三列的网格容器，并指定了每列的宽度。我们还创建了一个项目，并使用 grid-column-start 和 grid-column-end 属性将其跨越第一列和第二列。这意味着该项目将占据第一列、第二列和第三列的第一行。
grid-row 和 grid-column 属性
除了使用 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 属性来指定项目的起始和结束网格行列外，我们还可以使用 grid-row 和 grid-column 属性来简化这个过程。这两个属性可以接受类似 1 / span 2 的值，表示项目从第一行开始，跨越两个网格行。
以下示例代码演示了如何使用 grid-row 和 grid-column 属性来指定项目的起始和结束网格行列：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- --------- ----- - ----- - --------- - - ---- -- ------------ - - ---- -- -
在上面的代码中，我们创建了一个包含三列的网格容器，并指定了每列的宽度。我们还创建了一个项目，并使用 grid-row 和 grid-column 属性将其跨越第一行和第二行，以及第一列和第二列。这意味着该项目将占据第一列、第二列和第一行、第二行。
总结
在 CSS Grid 中，我们可以使用 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 属性来指定项目的起始和结束网格行列，以及使用 grid-row 和 grid-column 属性来简化这个过程。这些属性可以让我们更精确地控制项目的布局，从而创建出复杂的网页布局。希望本文对你学习和使用 CSS Grid 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dc6cf61886fbafa49d340b