CSS Grid实现类YouTube自适应网格：固定卡片最大宽度且维持列间距稳定的问题

我来帮你搞定这个Grid布局的小问题！你遇到的情况其实是auto-fit搭配1fr时的典型行为——当容器内的卡片数量不足以填满整行时，1fr会强制列宽拉伸以占满容器，导致卡片跟着变宽；而直接给卡片加max-width又会因为列本身还是宽的，让卡片和列边缘的空隙变大，看起来间距忽大忽小。

下面是调整后的解决方案，兼顾卡片最大宽度和稳定间距：

修改后的CSS代码 #

.grid-layout {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  display: grid;
  /* 核心修改：用fit-content限制列的最大宽度，替代1fr */
  grid-template-columns: repeat(auto-fit, minmax(5rem, fit-content(7rem)));
  /* 用grid原生gap控制间距，替代卡片的margin，保证间距稳定 */
  gap: 1rem;
  /* 可选：数量少时卡片靠左排列，也可以换成center让卡片居中 */
  justify-content: start;
}

.card {
  background: grey;
  height: 4rem;
  padding: 1px;
  /* 去掉卡片的margin，改用grid的gap统一控制间距 */
  /* margin: 0.5rem; */
  line-height: 4rem;
  color: white;
  font-weight: bold;
  font-size: 2rem;
  text-align: center;
}

关键修改说明 #

• fit-content(7rem)：这个值会让列的宽度在minmax的最小值（5rem）和设定的最大值（7rem）之间自适应。当窗口足够宽时，列宽最多到7rem就不再拉伸；窗口变窄时，列宽会缩小到5rem后自动换行，完美解决卡片拉伸的问题。
• gap: 1rem：Grid的gap属性是专门为网格元素设计的间距控制，它会直接在网格项之间创建固定的间距，不会受到列宽变化的影响，比用卡片的margin要稳定得多。这里的1rem相当于你原来上下左右各0.5rem的margin总和，效果一致但更可控。
• justify-content: start：当卡片数量较少时，这个属性会让卡片靠左排列，避免它们被强制分散到整行（如果想要居中效果，换成justify-content: center即可）。

这样调整后，不管卡片数量多少，卡片宽度都不会超过7rem，而且调整浏览器窗口时，卡片之间的间距始终保持稳定，完全符合你想要的YouTube式自适应网格效果！

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