Skip to main content

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

Responsive Grid Guide

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

Large desktop

>1440px

Large desktop

1370px

12

Small desktop

1439 - 1000px

Small desktop

910px

12

Large device

999 - 450px

Large device

450px

1

Small device

<449px

Small device

100%

1

Breakpoints

Large desktopSmall desktopLarge deviceSmall device
DeviceLarge desktopSmall desktopLarge deviceSmall device
Viewport width>1440px1439 - 1000px999 - 450px<449px
Grid width1370px910px450px100%
Columns121211