自适应布局在现代网站设计中非常普遍。而 CSS Grid 的出现让自适应布局变得更加容易和高效。在 CSS Grid 中，通过使用 auto-fill 和 auto-fit 属性，我们可以很方便地实现自适应布局。
auto-fill
auto-fill 属性是 CSS Grid 的一个非常强大的功能，它能够自动根据容器的大小来填充网格。这意味着我们无需手动计算每一行或每一列中元素的数量。使用该属性定义的网格容器会自动调整其宽度，从而在网格中填充适当数量的单元格。
下面我们来看一个简单的例子：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ----------------- ------------- ------ --------- ----- - ---------- - ----------------- ----- -------- ----- ----------- ------- -展开代码
在上面的例子中，我们定义了一个 .grid-container class 作为我们的网格容器。我们使用了 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 属性来定义网格列，其中 auto-fill 用于让容器自动填充列中的单元格， 而 minmax(200px, 1fr) 属性会指定单元格的最小和最大宽度，每一个单元格的宽度都将在最小值和最大值之间自动调整。 这样，只要容器的宽度足够大，就可以自动填充未使用的列给网格。
然后我们加入一个 .grid-item class 作为我们网格中的单个单元格进行样式设置，通过添加 padding 和 background-color 来区分一个单元格。
看一下我们的HTML结构如下：
-- -------------------- ---- ------- ---- ----------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ------展开代码
它会生成类似以下的自适应布局:
不难看出，当容器少于 200px 时，每一行最多只有一个单元格。而当容器宽度增加，每行的单元格数量就会增加，以填满可用的宽度。
auto-fit
auto-fit 不同于 auto-fill 的地方在于，即使容器中的所有元素都非常小，它仍然会强制性地填充网格的可用空间，从而让其充满容器。
这意味着，auto-fit 属性的应用使网格容器始终具有足够的空间来填充产生的单元，这将减少浏览器在呈现中的背景绘制的数量，比预定义的宽度方案更快地呈现更小的单元格。
使用 auto-fit 属性的方式与 auto-fill 属性相似，以下是它的一个例子：
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 20px; }
在这个例子中，我们同样使用 minmax(200px, 1fr) 属性指定单元格的最小值和最大值以及 grid-gap 设置间距。对比前面的例子，可以发现使用 auto-fit 属性的网格容器与其父元素宽度适配不同：若当前网格不充满容器，则添加空单元进行充填，若当前单元格充满容器，则丢弃最后一个单元格。
同样的，我们来看一下HTML结构和样式代码如下：
-- -------------------- ---- ------- ---- ----------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ------展开代码
auto-fit 会生成如下自适应布局样式：
不难看出，当容器那个固定时，它将以3列的形式进行布局，而当容器宽度增加时，单元格将逐次显示，填充容器的可用宽度。
总之，使用 auto-fill 和 auto-fit 属性会使我们的布局更有弹性，更高效。无需再手动计算每一行或每一列中元素的数量，CSS Grid 会自动操作。同时，总是确保我们的容器充满可用空间，可以提高渲染性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca2b85e46428fe9e21e1ef
