Boss UltimateBoss Ultimate
J

John Doe

Administrator

You are here:app › layouts ›  grid

Grid Spacing

The responsive grid focuses on consistent spacing widths, rather than column width. Material design margins and columns follow an 8dp square baseline grid. Spacing can be 8, 16, 24, or 40 pixel wide.

Full-width

Full-width grids: use fluid columns and breakpoints to determine when a layout needs to change.

xs=12
xs=12 sm=6
xs=12 sm=6
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3

Centered Grid

Centered grids: use fixed columns and re-flow the layout when all columns (plus a defined margin) no longer fit on the screen.

xs=12
xs=6
xs=6
xs=3
xs=3
xs=3
xs=3

Interactive

Below is an interactive demo that lets you explore the visual results of the different settings:

Cell 1
Cell 2
Cell 3

Auto Layout

The Auto-layout makes the items equitably share the available space. That also means you can set the width of one item and the others will automatically resize around it.

Material-UI Grid:
xs=3
xs=3
xs=3
xs=3
xs=8
xs=4
CSS Grid Layout:
xs=3
xs=3
xs=3
xs=3
xs=8
xs=4

Limitations

There is one limitation with the negative margin we use to implement the spacing between items.

W

Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support.

W

Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support.

W

Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support.