Carbon: Narrow grid support

[ConradSchmidt]

What package(s) are you using?

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

Summary

In the Carbon documentation a "narrow" grid is mentioned (16px gutter grid):
https://www.carbondesignsystem.com/guidelines/2x-grid/implementation#the-narrow-grid

It shows a notification that the naming convention is not consistent and the demo shows a grid which has more padding on the right (end) than on the left:

Is there any plan to make this grid mode official?
I can't find any class which would indicate a "narrow grid" (only condensed gird). And the version on the site is not really usable (using bx--no-gutter--left), because of the stated spacing issue.

What is the best way to implement this grid Carbon compliant?

Relevant information

My design team started to use this grid mode (16px) more often and I'm not sure what to advise them or the dev team (on how to implement it using bx--grid).

[Mikadv]

As a possible fallback I introduced a new class that can be used like the bx--grid--condensed:

.bx--grid--narrow {
  & > .bx--row {
    margin-right: -$spacing-03;
    margin-left: -$spacing-03;

    & > *[class*='bx--col'] {
      padding-left: $spacing-03;
      padding-right: $spacing-03;
    }
  }
}

Than you may use it the same way:

<div class="bx--grid bx--grid--narrow">
</div>

Would that be a sufficient solution or is there something likewise in carbon existing or planned?

[alisonjoseph]

Hi @ConradSchmidt working on getting this added now.

[ConradSchmidt]

@alisonjoseph thanks! Okay from the preview I can see that the bigger spacing on the right - so I guess it is a design decision. Because the solution @Mikadv offered, was equal spacing (outside 32px, gutter 16px) - is this solution still Carbon complaint?
The designers/devs are struggling with the gap on the right which makes some designs look off - any suggestions for this?