Grid system
Use the Nimbus responsive grid to build layouts of all shapes and sizes that respond perfectly to the screen in which they are displayed.
Grid structure
The Nimbus grid system is based on a 12-column layout, which allows for flexible and responsive design. The grid is divided into rows and columns, where each row can contain up to 12 columns.
Responsive grid
The grid is responsive, meaning it adapts to different screen sizes. The grid width is fixed for each screen size bracket, and the number of columns adjusts based on the screen size.
Breakpoints
More than 1440px
1439px - 1000px
999px - 450px
Less than 450px
Viewport
Device
Grid width
Columns
>1440px
Large desktop
1370px
12
1439 - 1000px
Small desktop
910px
12
999 - 450px
Large device
450px
1
<449px
Small device
100%
1
Breakpoints
| Device | Large desktop | Small desktop | Large device | Small device |
|---|---|---|---|---|
| Viewport width | >1440px | 1439 - 1000px | 999 - 450px | <449px |
| Grid width | 1370px | 910px | 450px | 100% |
| Columns | 12 | 12 | 1 | 1 |