响应式网格组件的列间距在小屏幕下怎么变窄了？

❤远香提问于 2026-02-08 00:43:37 阅读 118

组件

我在用CSS Grid做布局组件时遇到问题。按照文档写了个响应式网格，设置了gap: 2rem，但在手机横屏模式（900px宽）下，列间距突然变成原来的一半，看起来很挤。

我尝试过用媒体查询调整gap值：

@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: calc(1rem + 1vw); // 这里改过好几个值
  }
}

但发现当列数减少到2列时，左右两边的间距还会被压缩，是不是auto-fit有什么隐藏规则？

用浏览器调试工具看，元素间距确实显示1rem，但视觉效果还是不对…

我来解答赞 10 收藏

反馈

1 条解答

UE丶红静 Lv1

这个问题是响应式布局里常见的坑，auto-fit在列数变化时会动态调整子元素的宽度，导致视觉间距被压缩。单纯用gap属性确实很难控制。

建议用padding代替gap来控制间距，配合box-sizing可以更精确控制视觉效果。给你贴个改好的例子：

.grid {

  display: grid;

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

  padding: 0 1rem;

  box-sizing: border-box;

}



.grid > * {

  padding: 0 0.5rem;

  box-sizing: border-box;

}

这样改的话，外层容器用padding留白，内部元素用padding控制间距，不会受auto-fit的计算影响。如果还要适配更小的屏幕，加个媒体查询调整padding值就行。之前我也被gap坑过好几次，现在都改用padding方案了。

2026-02-08 02:56