Calcite Web is deprecated.

This project is no longer maintained and is not recommended for future development. Visit the Calcite Web GitHub repository for more information.

Calcite Web
Calcite Web

Grid System Examples

1
4 pre-4 post-6
column-9

Columns

1
column-23
2
column-22
3
column-21
4
column-20
column-5
column-19
column-6
column-18
column-7
column-17
column-8
column-16
column-9
column-15
column-10
column-14
column-11
column-13
column-12
column-12

Center Column

column-8 center-column

Nested Columns

column-18 tablet-column-8
column-3 tablet-column-4
1 tablet-column-4
1 tablet-column-4
1 tablet-column-4
2 tablet-column-4
10tablet-column-8
column-5 tablet-column-4
column-5 tablet-column-4
1 tablet-column-4
column-3 tablet-column-4
1 tablet-column-4
1 tablet-column-5
column-6 tablet-column-4
column-6 tablet-column-4
column-4 tablet-column-2
2 tablet-column-2
column-4 tablet-column-4

Responsive Columns

24
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1

Pre and Post

col
pre-21
post-21
col

Rows

column-2 With a lot of content, so it pushes down.
column-22
column-4
column-4
column-4
column-2 With a lot of content, so it pushes down.
column-22
column-4
column-4
column-4

Block Groups

block-group-4-up
block-group-4-up
block-group-4-up
block-group-4-up
block-group-4-up
block-group-4-up
block-group-4-up
block-group-4-up

Responsive Block Groups

block
block
block
block
block
block
block
block