如何为CSS Grid响应式布局设置最大4列并保持响应性？

你完全不需要改用Flexbox——CSS Grid本身就可以轻松实现「最多4列、最小列宽100px、自动折叠」的响应式布局，只需要调整一下grid-template-columns的写法就行。

解决方案代码 #

.grid-container {
  display: grid;
  /* 核心是这个写法 */
  grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 25% - 7.5px, 1fr), 1fr));
  grid-gap: 10px;
}

为什么这个写法能生效？ #

咱们拆解一下核心的clamp(100px, 25% - 7.5px, 1fr)：

• 最小值100px：确保每一列的宽度不会小于你设定的最小尺寸，当屏幕窄到不足以容纳多列时，网格会自动折叠成单列、两列或三列。
• 首选值25% - 7.5px：25%对应最多4列（100%/4），减去的7.5px是把3个10px的网格间距（grid-gap）平均分摊到4列上（(10px × 3)/4 = 7.5px），这样4列加间距的总宽度刚好填满容器，不会出现溢出或者留白。
• 最大值1fr：这个其实是兜底，当屏幕宽度远超4列所需的最小宽度时，列会自动拉伸填满容器，但因为首选值已经限制了最大列数为4，所以实际效果就是4列均匀分布。

为什么repeat(4, 1fr)不行？ #

repeat(4, 1fr)是固定4列布局，不管屏幕多窄，都会强行把4列挤在容器里，列宽会被无限压缩，完全失去了你想要的「折叠为单列」的响应性，所以肯定不符合需求。

另一种简化写法（不用clamp） #

如果你觉得clamp有点复杂，也可以用calc直接计算首选宽度：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, calc(25% - 7.5px)));
  grid-gap: 10px;
}

效果和上面完全一致，只是少了最大值的兜底（不过在这个场景下，兜底的作用几乎可以忽略）。

放心用Grid就行，它的响应式能力完全能满足你的需求～

内容的提问来源于stack exchange，提问作者Colin Burke