CSS Grid 是一种全新的 CSS 布局模式，它允许我们在网页中根据网格线来定位和调整各个网格单元的大小和位置。CSS Grid 的出现对于前端开发者来说是一个巨大的进步，尤其对于网页布局复杂的情况下，使用 CSS Grid 可以比传统的文档流和浮动布局更加方便和高效。
CSS Grid 布局的基本概念
在了解 CSS Grid 之前，需要先了解一些基本的概念。
网格容器和网格项
首先，需要定义一个网格容器（grid container），这个容器会包含一组网格项目（grid item）。网格项可以是一个元素、一组元素或者一个伪元素，网格容器的直接子元素都会成为网格项。
网格容器需要添加 display: grid 属性，这样浏览器就知道这是一个网格容器了。
----- - -------- ----- -
网格线
CSS Grid 中的网格线是指网格容器上的可见或者虚拟的线条，用来划分网格的。
每个网格容器都有两种类型的网格线：行网格线和列网格线。行网格线是沿着网格容器的纵向方向排列的，而列网格线是沿着网格容器的横向方向排列的。
网格线可以用像素、百分比或关键字来指定位置，如下所示：
----- - -------- ----- ---------------------- ----- ------ ------------------- ---- ------ -
这个例子中，我们定义了两列（分别是 100 像素和 200 像素宽）和两行（分别是 50 像素和 100 像素高），这样我们就得到了一个包含四个网格单元的网格容器。
网格轨道
网格轨道是指相邻两个网格线之间的空间，即网格项所在的位置。我们可以通过指定网格轨道的大小来控制网格项的大小和位置。
网格轨道可以通过以下属性来控制大小：grid-template-columns、grid-template-rows、grid-column-gap 及 grid-row-gap。
- grid-template-columns：用于指定每一列网格轨道的大小。
- grid-template-rows：用于指定每一行网格轨道的大小。
- grid-column-gap：用于指定列之间的间距。
- grid-row-gap：用于指定行之间的间距。
实践经验总结
下面是一些在实践中使用 CSS Grid 布局的经验总结：
1. 使用 repeat 函数实现网格轨道大小的复用
在定义网格项的大小时，可以使用 repeat 函数来实现网格轨道大小的复用，这样代码就更简洁些。
----- - -------- ----- ---------------------- --------- ----- ------------------- --------- ------- -
这个例子中，我们使用 repeat 函数指定了三个等宽的列和两行高度为 100 像素的行。
2. 使用 minmax 函数实现网格轨道大小的限制
在定义网格轨道的大小时，可以使用 minmax 函数来设定最小和最大值来限制大小，这样可以避免网格项大小受到其他因素的影响。
----- - -------- ----- ---------------------- --------- ------------- ------ -
这个例子中，我们使用 minmax 函数设定了列轨道的最小值为 100 像素，最大值为等分剩余空间。
3. 使用 grid-template-areas 实现更加复杂的布局
在网格布局中，我们可以使用 grid-template-areas 属性来定义网格项的布局，这样代码会更加清晰易读。
----- -
-------- -----
---------------------- --------- -----
------------------- ----- ---- ------
--------------------
------- ------ -------
----- ---- -----
----- ---- -----
------- ------ --------
-
------- - ---------- ------- -
----- - ---------- ----- -
----- - ---------- ----- -
------- - ---------- ------- -这个例子中，我们使用了 grid-template-areas 属性，同时给每个网格项指定了名称，然后使用 grid-area 属性将网格项布局到网格容器中。
总结
CSS Grid 提供了一种全新的网页布局方式，相比传统的文档流布局和浮动布局，它更加直观、灵活、高效，同时也有更多的样式控制能力。我们可以通过使用 repeat 函数、minmax 函数、grid-template-areas 属性等方式来构建出更加复杂、高可维护的网页布局。学会使用 CSS Grid 布局，将使我们的前端代码开发效率得到极大提高。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6481965448841e989410fd0b