UI shell option for no padding on content

2rem padding was introduced on bx--content in 10.3.0.

If you’re using grid in UI shell, bx--grid sets the outermost 2rem padding.

UI shell should have an option to not add padding to bx--content to give the application full control over its layout. Or, default to no padding and have an option (class) to add padding.

[mattrosno]

Hi @FabianPiconeDev - thanks for your comment. I agree that this override should not be required by everyone who uses the Content component with the grid.

We are currently evaluating CSS Grid as part of our 2021 release. See https://github.com/carbon-design-system/carbon/issues/7538

CC @joshblack @tay1orjones can we make sure to look at the Content component to make sure it plays nicely with our updated grid, so we can then remove this override used in the tutorial?

[fabpico]

I ran in to the same issue, there is even a comment linked to this issue in the official Carbon React tutorial’s index.scss.

/// Padding was introduced in 10.3.0, needs an option to let grid set the viewport gutter
/// @link https://github.com/carbon-design-system/carbon/issues/3010
.bx--content {
  padding: 0;
}

Even if i use bx--grid--narrow, the additional left padding is still there. IMO the problem is more on the combined usage of the Content component and the Carbon Grid classes, not the UI Shell (which only consists in Header, Left-/Right Panel as far i can see).

I see it can be compensated:

Each column has horizontal padding (aka a gutter) that defines the space between them. You can negate this padding at the row level with negative margins, allowing the content within your columns to be aligned along the left side.

But for me this is a workaround, not an option.