React里用CSS Grid布局，子项在移动端堆叠时突然变宽了怎么办？

艳雯提问于 2026-02-04 22:29:29 阅读 71

移动

在做移动端适配时遇到怪问题，用Grid布局的卡片在桌面端显示正常，但手机横屏时子项突然撑开到最大宽度，看起来好挤。我给容器加了max-width: 100%和width: 100%，也试过调整gap，但都没用。

这是我的代码片段：


function Gallery() {
  return (
    <div className="grid-container">
      {[1,2,3,4].map(i => (
        <div key={i} className="grid-item">
          <img src={image${i}.jpg} alt="" />
        </div>
      ))}
    </div>
  )
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .grid-item { max-width: 100% }
}

手机横屏（800px左右）时每个卡片宽度突然变成250px，导致两列就撑满容器了，但按minmax设置应该能更灵活收缩才对…是不是哪里漏了移动端适配的设置？

移动端开发

我来解答赞 7 收藏

反馈

2 条解答

宁蒙~ Lv1

你这个情况是典型的 minmax(250px, 1fr) 在窄屏下卡住最小宽度的问题。auto-fit 配合 minmax 确实会创建尽可能多的列，但每个格子不会小于 250px —— 所以在 800px 横屏时刚好塞下两列就满了，没法再分更多列，而且也不会缩小。

但你说“应该能更灵活收缩”，说明你其实是希望小屏时单列垂直堆叠，而不是硬撑两列。这时候别用 auto-fit 死磕，直接用媒体断点切布局更靠谱。

改成这样：

.grid-container {

  display: grid;

  gap: 1rem;

}



/* 移动端默认单列 */

@media (min-width: 769px) {

  .grid-container {

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  }

}



/* 小屏不设列数，让容器自然流式占满 */

@media (max-width: 768px) {

  .grid-container {

    grid-template-columns: 1fr;

  }

}



.grid-item {

  width: 100%;

  max-width: 100%;

  box-sizing: border-box;

}

同时删掉你在 .grid-item 上加的 max-width: 100% 冗余规则，没用。

核心思路：移动端优先，大屏才启用 Grid 多列，小屏直接单列堆着最稳。复制过去试试，横屏不会再挤了。

2026-02-12 16:13

闲人顺红 Lv1

试试把 minmax 的第一个参数调小点，比如 200px。auto-fit 在容器变窄时会保持子项最小宽度，导致横屏手机下只能显示两列。把 250px 调成 200px 或更小，就能让子项在窄屏下继续收缩。

.grid-container {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 1rem;

}

2026-02-04 23:00