Use grids to create consistent column based layouts
Grids have columns with gutters in between and margins to either side
Grids adapt to use different values at different breakpoints
- Desktop (Grid width: 961px-1200px)
- Tablet (Grid width: 577px-960px)
- Mobile (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.