Grid

The 12-col grid system adapts to screen size and orientation to provide responsive layouts across different screens, devices, and orientations to ensure consistency across layouts. Each breakpoint range determines the number of columns, recommended margins and gutters for each display size.

Desktop 1400px and above

The desktop grid is 1400px and up viewport size. It should maintain an 1320px container to stay within the 12-col grid system.

12
12
12
12
12
12
12
12
12
12
12
12
6 column
6 column
6 column
6 column
6 column
6 column
4 column
4 column
4 column
4 column
3 column
3 column
3 column
2 column
2 column
1 column

Middle Desktop 1200px-1399px

The desktop grid is 1200px-1399px viewport size. It should maintain an 1140px container to stay within the 12-col grid system.

12
12
12
12
12
12
12
12
12
12
12
12
6 column
6 column
6 column
6 column
6 column
6 column
4 column
4 column
4 column
4 column
3 column
3 column
3 column
2 column
2 column
1 column

Small Desktop 1024px - 1199px

The small desktop grid is 1024px - 1199px viewport size. It should maintain an 960px container to stay within the 12-col grid system.

12
12
12
12
12
12
12
12
12
12
12
12
6 column
6 column
6 column
6 column
6 column
6 column
4 column
4 column
4 column
4 column
3 column
3 column
3 column
2 column
2 column
1 column

Tablet 769px - 1023px

The tablet grid is 769px - 1023px viewport size. It should maintain an 721px (adjustable to screen size) container to stay within the 12-col grid system.

12
12
12
12
12
12
12
12
12
12
12
12
6 column
6 column
6 column
6 column
6 column
6 column
4 column
4 column
4 column
4 column
3 column
3 column
3 column
2 column
2 column
1 column

Mobile Landscape 768px and under

The mobile grid is 768px and under viewport size. It should maintain an auto (adjustable to screen size) container to stay within the 12-col grid system.

12
12
12
12
12
12
12
12
12
12
12
12
6
6
6
6
6
6
4
4
4
4
3 col
3 col
3 col
2 col
2 col
1 col

Mobile Portrait 575px and under

The mobile grid is 575px and under viewport size. It should maintain an auto (adjustable to screen size) container to stay within the 12-col grid system.

12
12
12
12
12
12
12
12
12
12
12
12
6
6
6
6
6
6
4
4
4
4
3 col
3 col
3 col
2 col
2 col
1 col