如何将多屏幕网格参数适配到grid-template-columns的repeat函数？

核心思路是利用CSS Grid的gap属性处理列间距（gutter），结合媒体查询为不同屏幕尺寸设置对应的外边距、列数和间距，再通过repeat(列数, 1fr)让列自动平分剩余空间。

代码实现 #

先写基础的移动端样式（对应360px宽度屏幕）：

.grid-container {
  /* 左右外边距对应18px参数 */
  margin: 0 18px;
  display: grid;
  /* gutter对应10px参数 */
  gap: 10px;
  /* 6列布局，每列平分剩余空间 */
  grid-template-columns: repeat(6, 1fr);
}

然后通过媒体查询适配840px宽度屏幕：

@media (min-width: 840px) {
  .grid-container {
    /* 左右外边距对应26px参数 */
    margin: 0 26px;
    /* gutter对应12px参数 */
    gap: 12px;
    /* 12列布局 */
    grid-template-columns: repeat(12, 1fr);
  }
}

原理说明 #

• margin直接控制容器的左右外边距，完全匹配你给定的尺寸参数；
• gap是Grid原生的间距属性，自动处理列之间的gutter，不需要手动计算总间距占用的空间；
• repeat(列数, 1fr)中，1fr代表“剩余空间的1份”，Grid会自动把容器内部的可用宽度（容器宽度 - 总gap）平均分成指定列数，实现自适应的列宽。

优化补充（可选） #

如果希望屏幕宽度超过840px时，容器不再继续变宽，保持固定的设计宽度，可以给容器添加max-width：

@media (min-width: 840px) {
  .grid-container {
    /* 计算容器最大宽度：840px屏幕宽度 - 左右margin总和 */
    max-width: calc(840px - 26px * 2);
    /* 水平居中 */
    margin: 0 auto;
    gap: 12px;
    grid-template-columns: repeat(12, 1fr);
  }
}

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