Grid栅格布局为什么在小屏幕上错位了？

皇甫清梅提问于 2026-02-28 17:09:18 阅读 34

组件

我用的是 Ant Design 的 Grid 栅格系统，本来在桌面端显示正常，但一到手机上就乱了。明明写了 xs={24} sm={12} md={8} 这种响应式配置，结果小屏时两个元素挤在一起，根本没换行。

是不是漏了什么设置？还是说要额外加 CSS？我已经确认 viewport meta 标签是有的：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Grid栅格布局组件

我来解答赞 6 收藏

反馈

2 条解答

端木桂香 Lv1

这种情况我见多了，大概率是 flex 布局的问题。Ant Design 的 Grid 是基于 flex 实现的，如果父容器没设置 flex-wrap: wrap，子元素就会挤在一起不换行。

先检查下你的容器样式，确保加了这两条：

.your-grid-container {

  display: flex;

  flex-wrap: wrap;

}

如果还不行，可能是 gutter（栅格间隔）搞的鬼。AntD 的 Grid 默认有 gutter 16px，有时候会导致计算宽度时出问题。试试这样覆盖：

.ant-row {

  margin-left: 0 !important;

  margin-right: 0 !important;

}

.ant-col {

  padding-left: 0 !important;

  padding-right: 0 !important;

}

还有个常见坑点：检查下你是不是在某个父元素上写了 white-space: nowrap，这玩意儿会破坏 flex 换行效果。我上周刚因为这个调试了两小时...

2026-03-10 06:00

Zz欣炅 Lv1

这个问题我之前也踩过坑，大概率是几个原因：

第一，检查一下你的 Col 组件是不是被 Row 包裹住了。Ant Design 的栅格系统，Col 必须是 Row 的直接子元素才能生效，要是中间套了层 div 或者别的容器，flex 布局就断了，响应式自然全乱。

正确的写法应该是这样：



  内容1

  内容2

  内容3

第二，看看有没有全局样式污染。有些老项目里会有那种全局 reset，把 box-sizing 设成 content-box，或者给所有 div 加了 padding/margin。栅格系统依赖 box-sizing: border-box，被覆盖的话宽度计算就崩了。可以在浏览器开发者工具里检查一下 Col 元素的 computed 样式。

第三，父容器宽度的问题。如果你的 Row 被放在一个固定宽度的容器里，比如写死了 width: 1200px，那在小屏幕上容器本身就不会缩放，里面的栅格自然跟着乱。确保父容器是流式的，或者用 max-width 代替 width。

第四，gutter 的坑。如果你给 Row 设置了 gutter，它会用负 margin 来抵消间距，但要是父容器有 overflow: hidden，两边的 padding 就会被切掉，视觉上看起来像错位。

最后说一句，xs={24} 的意思是超小屏幕下占满整行，如果两个元素挤在一起没换行，说明 xs 配置根本没生效。打开开发者工具，看元素上有没有 ant-col-xs-24 这个 class，没有的话就是断点判断出问题，有 class 但样式不对，那就是 CSS 被覆盖了。

2026-02-28 23:43