Grid Examples

.grid-container > .grid-x.grid-margin-x

.cell.small-6

.container

.row

.columns.medium-6

.grid-x

.cell

.grid-x

.small-6.cell

.grid-x

.medium-6.large-4.cell

.medium-6.large-8.cell

.grid-padding-x

.medium-6.large-4.cell

.medium-6.large-8.cell

.grid-margin-x

medium-6.large-4.cell

medium-6.large-8.cell

.grid-container > .grid-x.grid-margin-x

.cell.small-4

.grid-container.fluid > .grid-x.grid-margin-x

.cell.small-4

.grid-container.full

.cell.small-4

.grid-x

small-4 cell

auto cell (flex-grow)

.grid-x

small-4 cell

auto cell

.grid-x

shrink cell

auto cell

.grid-x

large-auto small-2 cell

large-shrink small-2 cell

large-auto small-2 cell

large-shrink small-2 cell

large-auto small-2 cell

large-shrink small-2 cell

.grid-x.grid-margin-x.medium-margin-collapse

Gutters at small no gutters at medium.

.grid-x.grid-margin-x

Cell

.grid-x.grid-padding-x.small-up-2.medium-up-3.large-up-6

.cell

grid-y

6/8/2

6/4/10

Flexbox Classes (alignment helpers)

.grid-x

Aligned to

the left

.grid-x.align-right

Aligned to

the right

.grid-x.align-center

Aligned to

the center

.grid-x.align-justify

Aligned to

the edges

.grid-x.align-spaced

Aligned to

the space around

.grid-x.align-top

I'm at the top (default)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium?

.grid-x.align-middle

I'm in the middle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium?

.grid-x.align-bottom

I'm at the bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium?

.grid-x.align-center-middle.text-center

I am in the center-middle

I am also centrally located

.callout.clearfix > .button.float-left + .button.float-right

Left Right

Gutters at small no gutters at medium.

.grid-x.grid-margin-x

Cell

.grid-x.grid-padding-x.small-up-2.medium-up-3.large-up-6

.cell

.grid-y

6/8/2

6/4/10

Flexbox Classes (alignment helpers)

.grid-x

Aligned to

the left

.grid-x.align-right

Aligned to

the right

.grid-x.align-center

Aligned to

the center

.grid-x.align-justify

Aligned to

the edges

.grid-x.align-spaced

Aligned to

the space around

.grid-x.align-top

I'm at the top (default)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium?

.grid-x.align-middle

I'm in the middle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium?

.grid-x.align-bottom

I'm at the bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium?

.grid-x.align-center-middle.text-center

I am in the center-middle

I am also centrally located

.callout.clearfix > .button .float-left > .button float-right

Left Right