React Grid布局在移动端为什么列会错位？

宇文羽霏提问于 2026-02-09 19:18:26 阅读 26

移动

我在用React做移动端适配时遇到了问题，用CSS Grid布局的两列内容在手机端变成了一列堆叠，但按照文档设置的fr单位好像没生效。

这是我的组件代码：


import styled from 'styled-components';

const GridContainer = styled.div<code>
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
</code>;

function ItemList() {
  return (
    <GridContainer>
      {[1,2,3,4].map(item => (
        <div key={item} style={{aspectRatio: '1/1', background: '#eee'}}>{item}</div>
      ))}
    </GridContainer>
  );
}

我在手机端（宽度360px）测试时，预期应该显示两列，但实际变成了单列。试过把minmax里的200px改成150px还是不行，用开发者工具检查发现grid-template-columns计算值变成了1fr。是不是auto-fit用错了？或者需要加其他属性？

布局方案移动端开发

我来解答赞 2 收藏

反馈

1 条解答

诸葛园园 Lv1

先检查一下你的 minmax 条件。问题就出在 200px 这个最小宽度上。

手机屏幕宽度是 360px，grid 容器要放两列的话，每列平均只有 180px。而你设置的是 minmax(200px, 1fr)，意思是每一列最少要 200px，但两个 200px 就要 400px 了，超过容器宽度，根本塞不下两列。所以浏览器只能退回到单列模式，让这一列撑满容器变成 1fr。

auto-fit 在这种情况下会自动把无法容纳的列丢弃，只保留能放下的一列，剩下的空间由 1fr 填满。这其实是正常行为，不是你用错了。

解决办法很简单：降低 minmax 的最小值。比如改成 minmax(150px, 1fr)，这样两列最低需要 300px，小于 360px 就能放下两列了。或者更稳妥点，用百分比或基于视口单位：

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

这样既能限制最大内容宽度，又能在小屏幕上自适应。另外建议加个 max-width 控制容器本身别溢出，避免意外横向滚动。

2026-02-09 19:26