React中使用CSS网格布局时，为什么在移动端会出现列重叠？

公孙新玲提问于 2026-02-01 18:17:25 阅读 61

前端

最近在做一个产品卡片列表的响应式布局，用CSS网格在桌面端显示三列没问题，但手机端测试时两列突然重叠在一起了，调整过断点还是不行…

代码结构是这样的：


import './Grid.css';

function ProductGrid() {
  return (
    
      {[1,2,3,4,5,6].map(n => (
        
          产品{n}
        
      ))}
    
  );
}

export default ProductGrid;

对应的CSS用了网格布局：


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

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

手机横屏（900px）时正常显示两列，但竖屏（360px）时两列却挤在一起了，gap间距也没了，是哪里没考虑到呢？

我来解答赞 8 收藏

反馈

2 条解答

南宫静静 Lv1

auto-fill 在窄屏计算列数时可能会因为容器宽度计算误差导致列重叠，改用 auto-fit 保证最小宽度约束生效。
直接改成 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，去掉手机断点也能自适应。
如果坚持手动控制断点，记得加 min-width: 0 防止内容撑开列宽。

2026-02-03 09:10

码农立顺 Lv1

问题出在 minmax(250px, 1fr) 这里，手机竖屏宽度不够时，250px 的最小值会让列挤在一起。我一般直接用 minmax(auto, 1fr) 或者设置更小的最小宽度。

修改后的 CSS：

.grid-container {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 调小最小宽度 */

  gap: 20px;

}



@media (max-width: 768px) {

  .grid-container {

    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 移动端也用 auto-fill */

  }

}

这样既能保证内容不重叠，又不会浪费空间。

2026-02-01 19:00