CSS Grid 中的 Auto-Fit 与 Auto-Fill 属性

介绍

CSS Grid 是一种用于创建多行、多列布局的强大工具，它使得我们可以很容易地创造复杂的布局，而无需依赖于任何框架或者类库。

其中的 Auto-Fit 与 Auto-Fill 两个属性是比较特殊的，它们可以用于自动布局，以响应容器的宽度变化，非常有用。

Auto-Fit

我们可以将 grid-template-columns 属性设置为 repeat(auto-fit, minmax(200px, 1fr))，它的含义是创建多个 200px 的列，当在视口上增加一个可用的列时，这个列将被添加到网格中，而不需要我们手动去添加一个新的列。

在这里，我们使用了minmax 函数，指定了每个列的最小宽度为200px，最大宽度为1fr（1fr就是网格剩余空间的比例），这将使网格适应不同的视口宽度。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Auto-Fill

我们还可以使用 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 来实现类似的效果。这个属性将列自动填充整个网格，直到没有更多的列可以填充为止。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

值得注意的是，当网格容器的宽度不足以容纳一个200px 的列时，这个列将被压缩。而 Auto-Fill 与 Auto-Fit 最大的不同在于前者能够自动填充整个网格，而后者则会停止在容器的边缘。这里需要根据自己的需求来选择。

结论

Auto-Fit 和 Auto-Fill 这两个属性可以自动的调整网格布局，使其适应不同的视口宽度，具有很高的效率和方便性，非常适合用于响应式设计。请根据自己的需求来选择使用。