如何让CSS Grid实现响应式并填满容器，消除两侧空白？

我来帮你搞定这个Grid布局的问题！你的核心困扰是网格无法铺满容器宽度，两侧出现空白，而且屏幕缩小时情况更糟——这主要是当前的Grid配置没有让列自适应填充剩余空间，反而强制居中导致了空白。

问题根源分析 #

1. justify-content: center：这个属性会让整个网格在容器中居中对齐，当容器宽度不是「列宽+间隙」的整数倍时，剩余的空间就会被平均分配到网格两侧，形成你看到的空白。
2. 固定列宽226px：使用repeat(auto-fill, 226px)时，列宽是固定死的，容器剩余空间无法被利用，只能留作空白；屏幕越小，剩余空间占比越高，空白问题就越明显。

解决方案 #

我们需要让Grid列自适应填充容器宽度，同时保证卡片的最小宽度，具体修改如下：

• 移除justify-content: center，让网格默认填满容器空间
• 改用grid-template-columns: repeat(auto-fit, minmax(226px, 1fr))，这个配置的逻辑是：
  • auto-fit：自动根据容器宽度调整列的数量
  • minmax(226px, 1fr)：每列最小宽度保持226px，当容器有多余空间时，列会平分剩余空间（1fr表示占一份可用空间）
• 把.full-card的固定宽度width:226px改成width:100%，让卡片自适应列的宽度，避免列宽变化时卡片尺寸不匹配

修改后的完整代码 #

<div class="container" style="padding: 50px;"> 
  <div class="grid"> 
    <div class="full-card"></div> 
    <div class="full-card"></div> 
    <div class="full-card"></div> 
    <div class="full-card"></div> 
  </div> 
</div>

.full-card { 
  background-color: #6a90c9; 
  width: 100%; /* 改为自适应列宽 */
  height: 289px; 
} 
.grid { 
  display: grid; 
  gap: 2.5rem; 
  align-items: center; 
  /* 移除justify-content: center */
  grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); /* 核心修改 */
}

效果验证 #

修改后，网格会自动铺满容器的整个宽度，和顶部的搜索栏完美对齐；当屏幕缩小时，列会自动减少数量，每列的宽度会自适应填充剩余空间，再也不会出现两侧的空白区域了。

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