Use grids to create consistent alignment and visual order.
They organise content for clarity and scannability.
They enable responsive layouts that adapt smoothly across screen sizes.
- Large (Grid width: 961px-1200px)
- Medium (Grid width: 577px-960px)
- Small (Grid width: <576px)
Usage
Use grid offsets to constrain page elements to the central 8 or 10 columns at tablet and desktop breakpoints. This prevents full width objects from becoming too wide.
Don't use the grid to divide and define layout within individual elements in a page design. For example, don't use the the grid to divide a card into 12 equal sections. The Element grid is designed to be used to define a page layout.