I know questions like these can come down to preference, but I'm looking for some input. When laying out a grid with a side menu do you take the leftover space and form a grid with that space, or do you include the menu in the grid and space it accordingly.

grid layout


If we take a look at Material Design.

They split their layout up into different UI Regions. These include side navigation, content areas and app bars. These regions can display actions, content or navigation destinations.

Permanent UI regions are regions that can be displayed outside of the responsive grid, like a navigation drawer. These regions cannot be collapsed.

Permanent UI region

When screen space is available, a permanent UI region exposes content.

Persistent UI regions are regions that can be displayed upon command at any time, or they can remain visible. They can be toggled on or off, to appear or disappear. When they appear, they condense both content and the grid.

enter image description here

enter image description here

You can find more information about the subject here: https://material.io/design/layout/responsive-layout-grid.html#ui-regions

| improve this answer | |
  • Thanks for the helpful post! – larry burns Sep 20 '19 at 2:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.