vertical spacing between Row.

[vijayst]

I want to have vertical spacing between Row, similar to gutter.

<Row gutter={8}></Row>

Something like vgutter will help.

<Row vgutter={8}></Row>

[afc163]

Just <Row style={{ marginBottom: 8 }}></Row>.

[KeionneDerousselle]

Wouldn't that mean the margin on the bottom isn't responsive the way gutter is? It would be nice to have something responsive.

[rjmarques]

I also think this feature request makes sense

[tigersaggy]

In my case, i wanted to reduce the default space between Rows, and marginBottom was not helpful (since it adds more space). So as a workaround for now, i have set height on column to make it work.
Example : <Col style={{ height: '40px' }} span={6}>

[ykzeng]

Vote for the vgutter feature, it doesn't make sense to have gutter only on horizontal axis instead of both (horizontal and vertical)

[iancdma]

I think we need to have this feature in the next release. @afc163

[Songkeys]

+1. Any updates for this?

[filipjnc]

I think the request is misleading. What the grid system indeed misses is not a marginBottom between rows, but a gutter between (vertically) stacked columns inside a row.

[webberwang]

How come the issue has been closed? I think the use case is common

[redaelkhayat]

<Row style={{ margin: -16 }}>{columns.map(() => <Col ... style={{ padding: 16 }} />)}</Row>

[MihaiWill]

Also for List component...

export interface ListGridType {
    gutter?: number;
    **vgutter?: number;** <--- THIS
    column?: ColumnCount;
    xs?: ColumnCount;
    sm?: ColumnCount;
    md?: ColumnCount;
    lg?: ColumnCount;
    xl?: ColumnCount;
    xxl?: ColumnCount;
}

[vtrikoupis]

This should be considered fundamental.

[ttobollik]

I actually think [nzGutter]="[8,8]" will do the trick

[bluenote10]

Since the status of this issue is a bit confusing: It has been implemented in #18979 but slightly different then discussed above. This works now:

From the docs:

[rizwanliaqat97]

Since the status of this issue is a bit confusing: It has been implemented in #18979 but slightly different then discussed above. This works now:

From the docs:

Didn't work for me, I'm on antd 4.12.3 I'm using this array format to set vertical and horizontal gutter but it ignores the vertical one and just applies the horizontal. If I give a number as gutter value then too it's applied in horizontal direction only.

[rizwanliaqat97]

I can tell it was working... we upgraded to antd 4 recently and then another upgrade to its latest version. It just stopped working somewhere in between.

[dhriaznov]

Agree with @rizwanliaqat97 , having the same issue after update of antd

[ZhangChengX]

Didn't work on 4.12.3 either. It adds row-gap property but the row-gap only works in a grid layout.

[siowzhenhan]

Experiencing the same issue with vertical gutter as well after updating antd

[themavix]

having the same issue on 4.15.3

[AlexGraz]

Same issue on 4.15.3.
To mitigate it I've wrapped my Rows in a Space set to vertical.

<Space direction={'vertical'} size={SpaceSize}>
   <Row>
       <Col/>
   </Row>
   <Row>
       <Col/>
   </Row>
</Space>

[khanguslee]

Didn't work on 4.12.3 either.

having the same issue on 4.15.3

This issue is still occurring in 4.16.3

When will this get resolved?

[vsosinga]

I ended up creating my own implementation of Row mimicking the old behaviour.
We don't use responsive gutters, so this only works with the [horizontal, vertical] gutter.

import "./Row.less";

import { Row as AntDRow } from "antd";
import { RowProps } from "antd/lib/grid";
import React from "react";

export const Row = ({
  gutter,
  ...props
}: RowProps): JSX.Element => (
  <AntDRow
    {...props}
    gutter={gutter}
    className="row"
    style={
      {
        "--row-margin": Array.isArray(gutter)
          ? `${(gutter[1] as number) / 2}px`
          : `${(gutter as number) / 2}px`
      } as React.CSSProperties
    }
  />
);

LESS:

.row {
  margin: calc(-1 * var(--row-margin)) 0px var(--row-margin);
  > .ant-col {
    padding: var(--row-margin);
  }
}

[robbash]

I'm struggling here as well. However, for me it seems to work nicely (even having different values for horizontal and vertical) keeping all Cols in one Row and I just wanted to share it:

<Row gutter={[8,24]}>
  <Col span={6}>col</Col>
  <Col span={6}>col</Col>
  <Col span={6}>col</Col>
  <Col span={6}>col</Col>

  <Col span={6}>col</Col>
  <Col span={12}>col</Col>
  <Col span={6}>col</Col>

  <Col span={24}>col</Col>
</Row>

[FA5I]

Same as @robbash, I had multiple rows, but the vertical gutter was not working.

Moving everything into one row seems to have worked.