Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Please check on codesandbox.

What is expected?

Downgrade the version to 4.8.2 demo

The vertical padding values should be set.

<div class="ant-col Col" style="padding: 12px 8px;">
...
</div>

What is actually happening?

The vertical padding values are missing.

<div class="ant-col Col" style="padding-left: 8px; padding-right: 8px;">
...
</div>

Environment	Info
antd	4.12.2
React	16.13.1
System	Ubuntu 20.04.1 LTS
Browser	Chromium Version 88.0.4324.96 (Official Build) snap (64-bit)

Issue Analytics

State:
Created 3 years ago
Reactions:4
Comments:20 (6 by maintainers)

Top GitHub Comments

9reactions

vorlovcommented, Feb 9, 2021

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

4reactions

linxuxcommented, Feb 8, 2021

@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.

Top Results From Across the Web

row-gap - CSS: Cascading Style Sheets - MDN Web Docs

The row-gap CSS property sets the size of the gap (gutter) between an element's rows.

MUI - V5 Grid System spacing not producing gutters between ...

The spacing is just not working properly. It is just creating a weird padding on the grid items where the items themselves are...

Gutters · Bootstrap v5.0

Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.

Grid - Ant Design

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

Space Between - Tailwind CSS

The space-* utilities are not designed to work together with the divide utilities. For those situations, consider adding margin/padding utilities to the ...