Layout Grid Test Page

1 of 3 Columns

2 of 3 Columns

3 of 3 Columns

1 of 3 columns (33.3%)

1 of 2 columns (50%)

4 of 12 Columns

6 of 12 Columns

2 of 12 Columns

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

3 Columns

6 Columns

9 Columns

3 Columns

6 Columns

9 Columns

3 Columns

5 Columns

7 Columns

4 Columns

6 Columns

8 Columns

3 Columns

5 Columns

7 Columns

3 Columns

6 Columns

4 Columns

4 Columns - Columns beyond the available 12 are not visible

9 Columns

4 Columns

3 Columns

1 of 2 Columns

Column

4 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

1 of 2 Columns

2 of 2 Columns

1 of 3 Columns

2 of 3 Columns

3 of 3 Columns

Layout Grid

Basic Example

Equal Width (Default)

Proportional Width

Content-based Width

Offsetting - Pull

Offsetting - Push

Offsetting - Push & Pull

Offsetting - Squeeze

Wrapping

Wrapping - Block Grid

No Wrap

Nesting

Removing Gutters - Remove Margin Only

Removing Gutters - Remove Padding and Margin

Responsiveness - Fluid Layout

Responsiveness - Breakpoint-based Layout

Responsiveness - Block Grid

Alignment - Horizontal

Vertical Alignment

Align Self