前言
随着前端技术不断的深入发展，网页的布局越来越重要，相对应的，CSS Grid 布局也越来越成熟和强大。CSS Grid 布局是一个二维的布局系统，能够让我们更加高效地进行网页的布局设计。其中，auto-fit 和 auto-fill 属性是 CSS Grid 布局中一对颇为神奇的属性，本篇文章就来详细介绍一下。
auto-fit 和 auto-fill 的区别
auto-fit 和 auto-fill 都是 CSS Grid 布局中的属性，它们的区别在于自动填充的行或列。
auto-fill
auto-fill 会自动填充未指定行或列数量的网格轨道，直到无法放置更多的网格项目。其实质是实现了网格项目的最小化布局，即在有多余网格轨道的情况下使网格项目最小化。举个例子：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}这个示例中，auto-fill 效果就是会自动填充空白的轨道，使得容器内的子元素始终占满整个容器，而不出现滚动条。
auto-fit
auto-fit 会自动填充未指定行或列数量的网格轨道，直到无法放置更多的网格项目。不同于 auto-fill 的是，auto-fit 模式会尽可能的创造网格项目的布局，而不是最小化布局。比如下面的示例代码：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}auto-fit 模式下，子元素的宽度不再都占满整个容器，而是放置在适合的位置上。
示例
下面，以一个代码示例进行演示，帮助理解 auto-fit 和 auto-fill。
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ----------- ---- ----- -------- - ----------------- ------- ---------------- ------------ - ----------- ----- ------------------------- ---------------- ------------- ------ ------------ ----- -------------------- -------- ----------- ----- ---------- - ----- ------------- ------ --- ------- - -------------------- -------- ------------- ----- --------------- ---- -------------- ------- ----------------- ---- ----------- ----- --- -------------- - ------------------- ---- -- --- -------------- - ------------------- ---- -- --- --------- ------- ------ -------- ---- ----- -------- - -------------- ----- ------------------ ------ ----------- ----------------------------- ------ -------------------- ------ -------------------- ------ ----------- ---------------------------- ------ -------------------- ------ -------------------- ------ ----------- -------------------------- ------- ------- -------
代码中定义了一个包含七个子元素的容器，使用 repeat(auto-fit, minmax(150px, 1fr)) 来布局。当demo容器大小增加时，子元素会填充网格轨道，如下方演示所示：
从示例中，你可以发现在使用 auto-fit 和 auto-fill 属性时，对于列宽使用 1fr 占比布局效果是最好的，这是因为 1fr 占比可以将容器剩余的宽度平均分配给轨道。同时，在子元素宽度变化较大的情况下，还需要使用 grid-column-end: span 来进行跨列布局。
总结
CSS Grid 布局中的 auto-fit 和 auto-fill 属性是十分实用的工具，可以帮助我们在不同的需求下进行适应性布局。auto-fill 主要用于最小化布局，特别适用于分辨率变化不大的情况。auto-fit 同样支持最小化布局，但是优先考虑项目布局的完整性，且适用于分辨率较大时。在实际开发中，应该根据实际需要进行合理选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b38c8d48841e9894fd4387