CSS Grid 是一种强大的布局模式，在前端开发中被广泛使用。Grid 布局的核心是 grid-template 属性，通过这个属性我们可以灵活地布局网格。
grid-template 的使用
grid-template 属性是一个复合属性，包括以下子属性：
- grid-template-rows：指定网格的行大小。
- grid-template-columns：指定网格的列大小。
- grid-template-areas：指定网格区域的名称。
- grid-template：指定全部内容。
下面介绍两种常用的用法。
指定行和列
指定行和列的方式是最基本的用法。可以用 repeat() 函数为每一行和每一列指定大小，也可以使用百分比或像素值。
.my-grid {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(4, 1fr);
}上面的代码指定了一个高为 300 像素、宽度为 4 个等分的网格。
指定网格区域
可以使用 grid-template-areas 属性指定网格区域的名称，然后在子元素中使用 grid-area 属性指定某个子元素应该放在哪个区域。
-- -------------------- ---- -------
-------- -
-------- -----
------------------- --------- -------
---------------------- --------- -----
--------------------
------- ------ ------ -------
---- ---- ---- ------
------- ------ ------ --------
-
------- -
---------- -------
-
---- -
---------- ----
-
----- -
---------- -----
-
------ -
---------- ------
-
------- -
---------- -------
-上面的代码指定了一个包含头部、导航、主体、边栏和页尾的网格。
grid-template 的注意事项
使用 grid-template 属性需要注意以下几点：
- 网格子元素需要显式地指定其所占网格区域，否则默认占据一个网格。
- 指定行和列的过程中，使用 repeat() 函数可以避免出现繁琐的代码。
- 使用 grid-template-areas 属性指定网格区域时，需要确保每一行和每一列都有所占的区域，否则会出现无法预料的布局。同时也需要注意区域名称一定对应正确。
总结
grid-template 是使用 CSS Grid 进行布局时必备的属性之一。掌握了这个属性之后，可以更加灵活地实现网页布局，并且能够在代码中减少冗余。需要注意的是，在指定网格区域时一定要保持布局的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b43ec968c7c53b0aa5db3