[Feature Request]: Use a CSS Grid to layout the UI Shell

[lee-chase]

The problem

The layout shell use of margin to move content into place forces the consumer of Carbon to rely on magic numbers and/or known numbers to size the content element.

As a result we see whole page scrolling (scroll bar over the global header), which does not move because of position fixed.

In addition to scrolling there may be other reasons to size elements based on the actual space available which cannot be achieved if the content element does not have a specified size.

As an aside, in Storybook docs it also has the margin bleeding out of the demo.

The story should probably be layout fullscreen too..

The solution

Use CSS Grid with defined areas for header, sidebar and content. No display fixed needed, although personally I choose to fix the body to remove scroll bounce.

NOTE: This probably requrires the introduction of a ui-shell component to contain the shell parts.

Examples

No response

Application/Product

N/A.

Business priority

None

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Subham-KRLX]

Hi, i would like to work on this issue.

[tay1orjones]

Use CSS Grid with defined areas for header, sidebar and content.

FWIW CSS Grid areas aren't supported in the <Grid> component so this would be something to house in the new standalone "ui-shell component to contain the shell parts" as you mention 👍

[alisonjoseph]

Was on a call with the Hashicorp design system team, and they have a higher level component, an app frame. Could be a direction to think about creating something similar.
https://helios.hashicorp.design/layouts/app-frame