CSS Grid 提供了一种强大的布局方式，可以让我们轻松地实现灵活的网格布局。在这种布局中，我们可以使用网格线来定义列和行，并将元素放置在这些列和行之间。然而，有时候使用网格线的编号并不能很好地表示布局，并且难以更改。在这些情况下，使用名称网格线可能更好。
名称网格线是指在 CSS Grid 中，我们可以为每个列和行定义自己的名称，然后使用这些名称来布局元素。这样做可以使代码更加具有可读性和可维护性。
如何定义名称网格线
在 CSS Grid 中，我们可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格。在定义这些属性时，我们可以在每个值之间使用空格来分隔多个网格线，如下所示：
---------------------- ------- --- ----- --- ------ ------------------- ----- ----- ----- ----- ---------
在这个例子中，我们使用方括号来定义了 start、mid 和 end 三个列名称，以及 top、mid 和 bottom 三个行名称。我们还使用了 1fr 和 2fr 这两个单位来定义了每个列的宽度。
如何使用名称网格线进行布局
在定义列和行之后，我们可以使用这些名称来布局元素。例如，我们可以使用 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 属性来指定元素应该在哪些列和行之间放置，如下所示：
----- - ------------------ ------ ---------------- ---- --------------- ---- ------------- ---- -
在这个例子中，我们将 .item 这个元素放置在了 start 和 end 两个列之间，在 top 和 mid 两个行之间。
我们还可以使用一些简写属性来更方便地指定元素的布局。例如，grid-column 属性可以将 grid-column-start 和 grid-column-end 组合在一起，如下所示：
----- - ------------ ----- - ---- --------- --- - ---- -
实际应用
名称网格线的最大好处是使代码更容易读懂和维护。让我们看一下一个实际的例子。
假设我们有一个页面，其中有一个文章列表和一个侧边栏。我们希望文章列表占据左侧的 2/3，侧边栏占据右侧的 1/3。使用名称网格线，我们可以定义如下的网格：
---------- - -------- ----- ---------------------- --- ---- --------- ----- -
在这个例子中，我们定义了一个包含两个列的网格，左侧列的宽度是右侧列的两倍。我们还添加了一个 20px 的间隔来分隔列和列之间的空白区域。
接下来，我们可以将文章列表和侧边栏分别置于这两个列中：
------------- - ------------ -- --------- -- - -------- - ------------ -- --------- -- -
这样，我们就成功地将页面布局为了一个带有两列的网格布局，其中第一列的宽度是第二列的两倍。
结论
使用 CSS Grid 中的名称网格线可以使布局更加灵活和易于维护。我们可以通过定义列和行名称来让代码更容易读懂，并使用名称来布局元素。无论是在实际开发中还是在学习中，掌握名称网格线都可以让我们更好地利用 CSS Grid 的强大能力。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670a7e95d91dce0dc8823985