Layout Grid

Background of this sink page is set to background-color-light

Basic Example

1 of 3 Columns
2 of 3 Columns
3 of 3 Columns

Equal Width (Default)

1 of 3 columns (33.3%)
1 of 3 columns (33.3%)
1 of 3 columns (33.3%)
1 of 2 columns (50%)
1 of 2 columns (50%)

Proportional Width

4 of 12 Columns
6 of 12 Columns
2 of 12 Columns

Content-based Width

Automatic Column
2 Columns
This column is defined by the width of it‘s content.
2 Columns
This column is defined by the width of it‘s content.
2 Columns

Offsetting - Pull

3 Columns
6 Columns
9 Columns

Offsetting - Push

3 Columns
6 Columns
9 Columns

Offsetting - Push & Pull

3 Columns
5 Columns
7 Columns

Offsetting - Squeeze

4 Columns
6 Columns
8 Columns

Wrapping

3 Columns
5 Columns
7 Columns
3 Columns

Wrapping - Block Grid

3 Columns
3 Columns
3 Columns
3 Columns
3 Columns
3 Columns
3 Columns
3 Columns
3 Columns
3 Columns

No Wrap

6 Columns
4 Columns
4 Columns - Columns beyond the available 12 are not visible

Nesting

9 Columns
4 Columns
4 Columns
4 Columns
3 Columns

Removing Gutters - Remove Margin Only

1 of 2 Columns
1 of 2 Columns

Removing Gutters - Remove Padding and Margin

1 of 2 Columns
1 of 2 Columns

Responsiveness - Fluid Layout

Column
Column
Column

Responsiveness - Breakpoint-based Layout

Column
Column
Column
Column
Column
Column

Responsiveness - Block Grid

Column
Column
Column
Column
Column
Column
Column
Column
Column
Column

Alignment - Horizontal

4 Columns
4 Columns
4 Columns
4 Columns
4 Columns
4 Columns
4 Columns
4 Columns
4 Columns
4 Columns

Vertical Alignment

1 of 2 Columns
2 of 2 Columns
1 of 2 Columns
2 of 2 Columns
1 of 2 Columns
2 of 2 Columns
1 of 2 Columns
2 of 2 Columns

Align Self

1 of 3 Columns
2 of 3 Columns
3 of 3 Columns