Flexible 12 column grid system for building responsive layouts with flexbox
Mobile first responsive layout built with flexbox. Working with 12 columns across five breakpoints to cover a great variety of screen sizes.
Sizes cover extra small - up to 576 px, small, medium, large and extra large screens - above 1200 px.
Use it to create flexible layouts with the following features:
- Five built-in breakpoints
- Optional fixed width grids
- 12 column grid across all screen sizes for fine grain control
- Vertical and horizontal alignment of columns inside the grid
- Column offsets for precise positioning
- Push and pull for reordering content responsively
- Equal width columns and dynamic width columns
- Future proof built with flexbox
Grid layout demos available for other frameworks.
Viewing demos & code for
Change the theme setting here
Change the language and localization settings here
Grid layout - Column sizing
Grid layout - Vertical alignment
Grid layout - Horizontal alignment
Grid layout - Offsetting columns
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.