ant-design: Grid: setting vertical spacing on the gutter property of Row as grid spacing is not working?

its a breaking change and should be listed on changelog. how should we add padding at the bottom as of now?

@zombieJ Aha?! Not by design?

Grid Gutter

You can use the gutter property of Row as grid spacing, we recommend set it to (16 + 8n) px (n stands for natural number).

You can set it to a object like { xs: 8, sm: 16, md: 24, lg: 32 } for responsive design.

You can use a array to set vertical spacing, [horizontal, vertical] [16, { xs: 8, sm: 16, md: 24, lg: 32 }].

Not quite understand. So is it a breaking change? Maybe the component document need to be updated.

@afc163 @zombieJ any update on this please?

Also, just to confirm that we doing the following everywhere

<Row gutter={[12, 24]}>
    <Col span={12}></Col>
</Row>

and the vertical spacing on the row is only intermittently being set, 9 times out of 10 I don’t see any vertical padding, but after a few refreshes it appears. Obviously that isn’t acceptable.

Breaking change also for me, please reopen. It seems I have to revert up to 4.10.3 to have work again.

Breaking change for me! Almost every page broken, downgrade to 4.11.2 works.

Downgrade to 4.11.2 should fix it.

For the sometimes return true & false, it’s always return false at first mount since SSR env do not support flex layout. The flex gap check is trigger useEffect.

Grid component is design to help simplify the layouting. It’s not expect to patch much style on the Grid component but use customize node instead:

<Row style={{}}>
  <Col style={{}} />
</Row>

to

<div style={{}}>
  <Row>
    <Col>
      <div style={{}} />
    </Col>
  </Row>
</div>

We also meet some feedback when move v3 to v4 by using flex layout instead of float layout. It breaks user who put something in Row directly like:

<Row>
  <div style={{}} />
</Row>

We try to avoid breaking official documents under minor versions, but for some unexpected usage, we can only try to keep compatibility as much as possible. It is difficult to achieve a perfect balance, but for new features that can solve bugs and stay the same, we will prefer the former. If really don’t want to inject the method, choose the locked version maybe the last choice.

@zombieJ Thanks for getting back to me. In our case it looks as though sometimes (on the newest version of Chrome) that functions returns false, and sometimes it returns true. When it returns false, the paddings/margins are all wrong. Could you point me to where this function actually gets called?

Also, I think the main issue that people aren’t happy with is that whether that function returns true or false, it shouldn’t break the layout of the grid. The Ant framework should have checks in place to ensure that the grids look identical over all browsers, regardless of whether that browser supports flex row gap.

Thanks for getting back to us @zombieJ - however we shouldn’t have to hack anything to get the grid layout working as expected. The issue that I believe most of us are facing is that it’s intermittent, sometimes the padding exists and sometimes it doesn’t. My guess would be that the detectFlexGapSupported method returns a different result each time. I’ll have a check my end to see if it’s an issue with how we’re rendering our components and add my findings to this thread.

Again, thanks for getting back to us, it’s good to know that there’s support available for this issue.