Grid布局响应式问题：小屏幕下grid-items无法占满宽度并换行

你遇到的问题核心是没有用Grid的自适应列配置，新手常犯的错误是给列设置固定宽度，或者没结合auto-fit/auto-fill和minmax()来实现响应式调整。

常见错误写法（导致留白/不换行） #

如果你的容器CSS是类似这样：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 200px); /* 固定列宽，无法自适应 */
  gap: 1rem;
}

这种写法下，窗口缩小到不足以放下3个200px的列时，Grid不会自动减少列数，只会保留3列，导致容器出现横向滚动或者留白，自然也不会占满屏幕宽度。

正确的自适应写法 #

用auto-fit + minmax()组合，让Grid自动根据容器宽度调整列数，同时保证每列占满可用空间：

.grid-container {
  display: grid;
  /* 自动适配列数，每列最小200px，最大占满剩余空间 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  width: 100%; /* 确保容器占满父级宽度，默认block元素可省略，但新手建议加上 */
}

• auto-fit：自动计算容器能容纳多少列，多余的列会折叠，不足时自动减少列数
• minmax(200px, 1fr)：每列最小宽度200px（低于这个值就换行），最大宽度是均等分配容器的剩余空间（1fr），保证列始终占满宽度

额外需要检查的细节 #

• 不要给grid-container设置固定宽度（比如width: 900px），否则容器无法随窗口缩小
• 确保grid-item没有设置固定宽度，改成width: 100%让它继承列的宽度
• 检查是否给容器加了overflow-x: hidden或者max-width限制，导致Grid无法正确计算可用空间

完整测试示例 #

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding: 1rem;
  width: 100%;
}

.grid-item {
  background: #eee;
  padding: 2rem;
  text-align: center;
  width: 100%; /* 确保占满列宽 */
}
</style>

调整窗口大小试试，这个配置会自动在2列、3列、甚至1列之间切换，且每列始终占满屏幕宽度。

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