介绍
CSS Grid是一种非常强大的布局模式，它允许我们创建一个网格系统，以便在网格内放置元素。CSS Grid最初设计的目的是为了创建完整的网页布局，但是它的好处不仅限于此。CSS Grid还能够帮助我们轻松地对齐表单，制作图标，设计灵活的用户界面等。
CSS Grid由网格容器和网格项组成，容器部分设定网格线，网格项部分放置在网格线之间。网格线是网格的基础构件，是我们在网格上放置元素时依照其相对位置进行放置的参考。但是，如果只使用默认的网格线，很难完全控制网格的布局。那么，我们该如何自定义网格线呢？
步骤
Step 1：创建网格容器
首先，我们需要创建一个网格容器，并为其设置display属性为grid，表示该容器将使用CSS Grid布局。
---------- - -------- ----- -
Step 2：自定义网格线
接下来，我们需要定义我们自己的网格线。在CSS Grid中，我们可以使用grid-template-columns和grid-template-rows属性来定义行和列的大小和数量。
例如，以下CSS代码创建了一个具有3个列和3个行的网格：
---------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ----- ------ -
在这个网格中，我们使用了1fr（1分数单位）作为列的宽度，意味着每个列将占用网格容器可用宽度的1/3。同时，我们为每一行设置100px的高度。
Step 3：放置网格项
现在，我们可以将我们的网格项放置在我们定义的网格线之间了。
---------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ----- ------ - ---------- - ----------------- ----- -
---- ------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ------
在上面的示例中，我们使用了一个名为.grid-item的类来表示每一个网格项，每个网格项都填充了它所在的网格。
自定义网格线的高级方法
我们可以使用更高级的方法来自定义我们的网格线，这样我们就可以更好地掌控我们的网格。
使用repeat()
repeat()函数可以使我们在网格UI中更加有效地控制我们的网格线。
例如，以下CSS代码可以定义一个具有5个等宽列和1个相对宽度的列的网格：
---------- - -------- ----- ---------------------- --------- ---- ------------- ----- -
注意，我们使用了minmax(min-width, max-width)函数来指定一个相对于可用宽度的值。这就意味着该列将至少为100px宽，并因容器大小而变化。我们也可以使用auto-fit或auto-fill关键字来自动调整网格线，这样我们可以根据容器大小自动重复网格项的数量。
使用网格区域定义
我们也可以使用网格区域定义来指定每个网格项应该放在哪里。
例如，以下CSS代码定义了一个具有四个网格项的2列2行网格：
---------- -
-------- -----
--------------------
------- -------
------------- -----------
---------------------- ----- ----
------------------- ---- ----
-
------- -
---------- -------
-
-------- -
---------- -------------
-
----- -
---------- ----------
-在这里，我们使用grid-template-areas属性来指定每个网格项应该放置在哪个矩形区域内。我们还为每个网格项定义了一个名称（header、sidebar、main），并使用grid-area属性将它们与特定的网格区域相对应。
结论
使用CSS Grid自定义网格线并不那么复杂，但是它对于创建美观、精确的UI布局是非常必要的。我们可以使用repeat()函数和网格区域定义来更好地控制我们的网格线，从而创建出优雅的UI。让我们使用CSS Grid改变未来的前端布局吧！
示例代码：
---------- -
-------- -----
---------------------- --- --- ----
------------------- ----- ----- ------
-
---------- -
----------------- -----
-
----------- -
-------- -----
---------------------- --------- ---- ------------- -----
-
----------- -
-------- -----
--------------------
------- -------
------------- -----------
---------------------- ----- ----
------------------- ---- ----
-
------- -
---------- -------
-
-------- -
---------- -------------
-
----- -
---------- ----------
-来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6739a659317fbffedf17dde7