Carbon Grid class bx--col doesn't include top or bottom padding

What package(s) are you using?

• [ x] carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you’re having.

Our team wraps the Carbon Grid classes into a component and I’ve noticed what I think is an inconsistency between the code and the documentation.

The documentation (links and screenshots below) states that there’s a standard 16px padding on Items (that’s how I read it, which may be incorrect). When I look at the bx--col class, I only see padding on the left and right.

Is this issue related to a specific component?

This issue is related to the Grid classes. Specifically bx--col.

What did you expect to happen? What happened instead? What would you like to see changed?

I expected a standard padding to be applied on all sides of elements tagged with the bx--col class instead of just the left and right.

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

10.5.1

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

I work within IBM on the IBM Marketplace.

Steps to reproduce the issue

1. Create a simple Grid and with a Row and Columns. I have a link below.

2. https://codesandbox.io/embed/carbon-components-getting-started-u9dmm

Additional information

• See padding section in https://www.carbondesignsystem.com/guidelines/layout/#grid-behaviors

[mattalco]

@joshblack Thanks! We’re super excited about the Carbon Grid component and can’t wait to use it.

[jeanservaas]

Weird, you kind of read my mind, I was noticing this discrepancy yesterday. Ideally, I think the answer to your question is yes… the grid code should ship with vertical padding that matches the side padding…

Chiu’s grid guidance examples with padding had both the vertical and the left and the right.

Whereas the examples I’ve been creating for grid code tab follow what you’ve done for the grid demo and only have the left and the right shown.

But, I do want to make the point, that if people are using the 32px, the 16px or the 2px scenarios on say a dashboard situation, they want to also keep their vertical padding consistent with that choice.

BUT: My question is, if we attach it to the grid package… is that going to be a problem for Mixed use scenarios? I’m trying to think of a case where i might be an issue – let’s talk in person about it!