Basic

Stacked

Basic - Flipped

Stacked

Basic - 3 columns

Basic - Left Split

First region will go above content in mobile.

Basic - Right Split

First region will go above content in mobile.

Edge to Edge

With Gutter

With Narrow Gutter

Container

With Gutter

With Narrow Gutter

Narrow Container

With Gutter

With Narrow Gutter

Nested Container

Nested Narrow Container

Nested Gutter

Nested Narrow Gutter

Full Width (breakout of container)

With Gutter

With Narrow Gutter

1 Column

Full Width

This will break out of a container to fill the screen Edge-to-Edge

Overflow

This will break out of a container slightly

Shrink

Decrease the width size so it is smaller than the outside content.

2 Columns

2 Columns - 33/67

2 Columns - 67/33

2 Columns - 25/75

2 Columns - 75/25

3 Columns

3 Columns - 25/50/25

3 Columns - 25/25/50

3 Columns - 50/25/25

4 Columns

2 Columns Sibling Grid

3 Columns Sibling Grid