--- layout: default title: Grid Examples ---
{{> header}}
.container
.row
.columns.small-6
.grid-container.full
.grid-x
.cell
.grid-container.fluid
.grid-x
.cell
.grid-container > .grid-x
.cell.small-6
.cell.small-6
.grid-container > .grid-x.grid-margin-x
.cell.small-6
.cell.small-6
.container
.row
.columns.medium-6
.grid-x
.cell
.cell
.grid-x
.small-6.cell
.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
.cell.small-4
.cell.small-4
.grid-container.fluid > .grid-x.grid-margin-x
.cell.small-4
.cell.small-4
.cell.small-4
.grid-container.full
.cell.small-4
.cell.small-4
.cell.small-4
.grid-x
small-4 cell
auto cell (flex-grow)
.grid-x
small-4 cell
auto 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.
Gutters at small no gutters at medium.
.grid-x.grid-margin-x
Cell
Cell
.grid-x.grid-padding-x.small-up-2.medium-up-3.large-up-6
.cell
.cell
.cell
.cell
.cell
.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
Cell
.grid-x.grid-padding-x.small-up-2.medium-up-3.large-up-6
.cell
.cell
.cell
.cell
.cell
.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