CSS Grid自适应布局问题：换行后元素占满整行宽度

你需要结合媒体查询和不同的grid-template-columns配置来实现这三种布局场景，核心是根据容器宽度的断点，精准控制列数与元素宽度：

核心逻辑 #

• 当屏幕宽度足够放下3个及以上250px的元素（含间距）：保留原有repeat(auto-fit, minmax(250px, 1fr))，让元素自动适配每行数量
• 当屏幕宽度仅能放下2个元素：强制设置为两列，每列占1fr（即各占50%宽度，自动扣除间距）
• 当屏幕宽度仅能放下1个元素：强制设置为单列，元素占满整行宽度

完整代码实现 #

假设你的$gap-5px变量值为5px，调整后的CSS代码如下：

section.css-grid {
  display: grid;
  /* 默认适配3个及以上元素的场景 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  column-gap: 5px; /* 替换为你的变量值或具体数值 */
}

/* 容器宽度小于760px（3*250 + 2*5）时，切换为2列布局 */
@media (max-width: 759px) {
  section.css-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* 容器宽度小于505px（2*250 + 5）时，切换为1列布局 */
@media (max-width: 504px) {
  section.css-grid {
    grid-template-columns: 1fr;
  }
}

img {
  width: 100%;
  cursor: pointer;
}

之前尝试无效的原因 #

• grid-template-rows: 1fr仅控制行高，和列布局逻辑无关，因此不起作用
• grid-auto-columns用于定义自动生成列的宽度，无法主动控制预设的列数，不适用当前需求
• 之前的媒体查询可能没设置正确的断点值，或未将grid-template-columns改为对应的1fr/1fr 1fr，导致布局未按预期切换

补充说明 #

如果你的间距值不是5px，需要重新计算断点：

• 3个元素的最小宽度 = 3*250 + 2*间距值
• 2个元素的最小宽度 = 2*250 + 1*间距值
  将媒体查询的max-width设为上述最小宽度减1px即可。

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