Ant Design Grid的gutter为什么两边没有间距只中间有？

瑞红 ☘︎ 提问于 2026-02-19 09:51:36 阅读 4

组件

在用Ant Design的Grid做两列布局时，设置gutter=[16,32]想让左右两边各留16px，中间间隔32px，结果两边根本没有间距，中间间距倒是对了，这是为啥呢？

代码这样写的：<Row gutter={[16, 32]}>，然后两个Col都用了span=12。试过把顺序反过来写成[32,16]反而上下间距对了但左右完全没反应…


<Row gutter={[16, 32]}>
  <Col span={12}>左边内容</Col>
  <Col span={12}>右边内容</Col>
</Row>

检查了文档说是横向纵向的像素值数组，但实际效果完全不符合预期，两边应该留白的地方紧贴着容器边缘…

我来解答赞 5 收藏

反馈

1 条解答

爱学习的志玉 Lv1

这个问题其实是很多人对 gutter 的理解有偏差。Ant Design 的 gutter 并不是用来直接设置容器外边距的，而是用来控制列与列之间的间距。也就是说，gutter 只会影响 Col 元素之间的间隔，而不会自动给左右两边增加额外的外边距。

具体来说，你写的 <Row gutter={[16, 32]}> 中的 [16, 32]，第一个值 16 是水平方向的列间距，第二个值 32 是垂直方向的行间距。这个设置会让两个 Col 元素之间产生 32px 的间距，但不会在 Row 容器的左右两侧自动留出 16px 的空白。

如果你希望左右两边也有 16px 的间距，CSS的话需要手动给 Row 或者外层容器加一个 padding。比如这样：

<div style="padding: 0 16px;">

  <Row gutter={[32, 32]}>

    <Col span={12}>左边内容</Col>

    <Col span={12}>右边内容</Col>

  </Row>

</div>

这里我把 gutter 改成了 [32, 32]，因为中间的间距你已经明确要 32px，而左右两边通过外层的 padding 来实现 16px 的留白。

还有一种方法是直接用 CSS 覆盖 Row 的样式，不过我个人更推荐第一种方式，因为它更直观，也不容易引发样式冲突。

最后提醒一句，Ant Design 的 gutter 默认会把间距均分到左右两边的 Col 上，所以看起来像是列之间的间隔，但并不会影响容器外部的布局。这其实是个常见的坑，踩过一次之后就记住了。

2026-02-19 10:00