如何控制CSS Grid中repeat(auto-fit)生成的列数以适配12列网格？

核心逻辑是通过min()函数限制单列最大宽度，强制列数只能为12的指定因数（1、2、3、4、6），完全不需要媒体查询或容器查询。

你允许的列数对应的单列最大占比分别为：

• 1列：100%容器宽度
• 2列：50%容器宽度
• 3列：33.333%容器宽度
• 4列：25%容器宽度
• 6列：16.666%容器宽度

min()函数会自动选取当前容器宽度下能满足你设置的最小列宽（200px）的最小百分比值，自动跳过5、7、8等无法被12整除的列数。

修改后的代码 #

React组件代码 #

<Grid gap="2rem" gridTemplateColumns="repeat(auto-fit, minmax(200px, min(calc(100% - 0rem), calc(50% - 1rem), calc(33.333% - 1.333rem), calc(25% - 1.5rem), calc(16.666% - 1.666rem))))">
  <Block bgColor="blue" height="2rem" width="100%"/>
  ...
</Grid>

对应生成的CSS #

grid-template-columns: repeat(auto-fit, minmax(200px, min(calc(100% - 0rem), calc(50% - 1rem), calc(33.333% - 1.333rem), calc(25% - 1.5rem), calc(16.666% - 1.666rem))));

注：calc里减去的数值是为了抵消gap的宽度影响，你可以根据你设置的gap值调整计算规则，如果不需要考虑gap的影响，直接写min(100%, 50%, 33.333%, 25%, 16.666%)即可。

效果验证 #

你可以用不同容器宽度测试：

• 容器宽度≥1200px：取16.666%，每行6列，单列宽度≥200px
• 800px≤容器宽度<1200px：取25%，每行4列
• 600px≤容器宽度<800px：取33.333%，每行3列
• 400px≤容器宽度<600px：取50%，每行2列
• 容器宽度<400px：取100%，每行1列

兼容性说明 #

min()函数兼容Chrome 79+、Firefox 75+、Safari 13.1+，覆盖绝大多数主流用户群体，远高于容器查询的兼容性。

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