CSS Grid 是一个非常强大的布局模块，可以帮助我们轻松处理复杂的页面布局。其中，使用 auto-fit 和 auto-fill 可以实现自适应的布局效果，让布局更加灵活。
auto-fit 和 auto-fill 的介绍
auto-fit 和 auto-fill 都是 CSS Grid 中的一个重要属性，在实际开发中可以起到自适应布局的效果。
auto-fit 表示自动适应容器大小，让网格自动填满空间，保证每一行或每一列都能容纳一个网格元素。如果网格元素数量不够填满，则空白区域不会显示。
auto-fill 表示网格容器会自动填充空白区域，保证每一行或每一列都至少容纳一个网格元素。当网格元素数量不够填满容器时，空白区域会显示，显示为空白区域的网格元素。
auto-fit 和 auto-fill 的区别
auto-fit 和 auto-fill 的区别可以用一个简单的例子来说明。
下面是一个简单的 CSS Grid 布局，我们想要将四个框框放到一个网格容器中，使用 auto-fit 和 auto-fill 区别如下。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
}使用 auto-fit 时，容器的大小可以根据网格元素的大小自适应调整，可以保证每行都至少有一个网格元素。
而当使用 auto-fill 时，容器的大小会一直填充整个容器，当网格元素数量不够时，会填充空白区域，但是不能保证每行都至少有一个网格元素。
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 10px;
}auto-fit 和 auto-fill 的应用
auto-fit 和 auto-fill 能让我们在页面布局时更加灵活，适应页面不同大小的适应性需求。
例如，我们可以使用 auto-fit 和 auto-fill 让页面的列数自适应容器的大小，这在响应式布局中非常有用。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
}除此之外，还可以使用 JavaScript 来控制使用 auto-fit 和 auto-fill，动态改变网格容器的大小。
总结
auto-fit 和 auto-fill 是 CSS Grid 中非常有用的属性，可以帮助我们实现自适应布局，提高开发效率，在响应式设计中也非常实用。希望本文能对大家在前端开发中使用 CSS Grid 时有所帮助。
示例代码如下：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
}来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64984c3b48841e9894559016