随着网页设计的不断发展，使用 CSS Grid 布局的需求也越来越普遍。在网页设计中，我们经常需要使用网格布局，以便更好地呈现内容。而使用CSS Grid布局，我们可以轻松实现更加复杂的网格布局，以创造复杂的网页布局效果。在这里，我们将说明如何使用CSS Grid布局中的auto-fill和auto-fit属性，以更好地应用CSS Grid布局。
auto-fill 属性
auto-fill属性可用于填充一个或多个网格轨道，以符合容器的大小。auto-fill的作用是自动填充网络轨迹，从而实现网格布局的自适应。在这个属性的帮助下，我们可以根据网格容器的大小和网格轨道的大小来自动调整网格列的数量。
首先，我们需要定义网格容器：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 20px;
}这里我们看到，我们使用了repeat函数，该函数可以重复一个模板段。在这里，我们传递了auto-fill作为第一个参数，表示我们要使用auto-fill属性。第二个参数是minmax(250px, 1fr)，表示格子的大小。
minmax函数是CSS Grid中非常有用的函数，它可以指定一个值的最小值和最大值。在这里，我们使用250像素作为最小值，1fr作为最大值。当容器空间不足以放置250像素宽度的网格轨道时，它将自动收缩，直到适合容器。而当容器空间大于最大值时，它将自动伸展以填充容器。
auto-fit 属性
auto-fit是另一个类似的属性，它可以自适应填充整个容器。与auto-fill不同的是，auto-fit将自动删除不必要的网格列，以适应容器空间。在auto-fit的帮助下，我们可以轻松实现网格轨道的自适应。
同样，我们需要定义网格容器：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}这里，我们可以看到我们使用了auto-fit属性，该属性会自动删除不必要的网格列以适应网格容器的大小。此外，我们仍然使用minmax函数来指定格子的最小和最大值。当容器空间不足以放置250像素宽度的网格轨道时，它将自动收缩，直到适合容器。而当容器空间大于最大值时，它将自动伸展以填充容器。
示例代码
为了更好地理解使用自动填充和自适应填充属性时的帮助，我们提供了一些示例代码。
使用auto-fill填充网格布局：
-- -------------------- ---- ------- ---- ------------------ ------------ ------------ ------------ ------------ ------------ ------------ ------ ------- ---------- - -------- ----- ---------------------- ----------------- ------------- ------ --------- ----- - --------
使用auto-fit自适应填充网格布局：
-- -------------------- ---- ------- ---- ------------------ ------------ ------------ ------------ ------------ ------------ ------------ ------ ------- ---------- - -------- ----- ---------------------- ---------------- ------------- ------ --------- ----- - --------
总结
总的来说，使用CSS Grid布局可以轻松地实现复杂的网格布局。auto-fill和auto-fit是CSS Grid布局中两个非常有用的属性，可以帮助我们自动调整网格的大小以适应容器的大小。无论是在设计响应式网站，还是在设计任何其他类型的网站，这些属性都可以提高我们的工作效率，以实现更好的网页布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b22d0148841e9894e77a4b