Grid

The grid makes use of flexbox and box-sizing to provide features that float-based layouts can’t.

The grid object is made up of two core classes:

Class Name	Description
`o-grid`	The main container element that holds all of the grid columns.
`o-grid-cell`	A child element of `o-grid` that acts as a column within the grid.

<div class="o-grid">
  <div class="o-grid-cell">
    Hello World.
  </div>
</div>

Cell Sizing

To control the width of the grid cells, you’ll need to apply some of our sizing utilities to the each o-grid-cell.

<!-- Notice the `size-*` classes on each grid cell. -->
<div class="o-grid">
  <div class="o-grid-cell  u-md-size4of8  u-lg-size7of12">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>
  <div class="o-grid-cell  u-md-size4of8  u-lg-size5of12">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>
</div>

Auto Fit Cells

For a more simple grid, adding the o-grid--autoFit modifier ensures space is evenly distributed without need for sizing classes. A grid container with this modifier can have any number of child cells.

<!-- 3 columns, evenly distributed. -->
<div class="o-grid  o-grid--autoFit">
  <div class="o-grid-cell">
    <img src="https://unsplash.it/g/200/200" class="u-sizeFull">
  </div>
  <div class="o-grid-cell">
    <img src="https://unsplash.it/g/220/220" class="u-sizeFull">
  </div>
  <div class="o-grid-cell">
    <img src="https://unsplash.it/g/240/240" class="u-sizeFull">
  </div>
</div>

Equal Height Cells

Make all the cells the height of the tallest one with o-grid--equalHeight.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="o-grid  o-grid--autoFit  o-grid--equalHeight">
  <div class="o-grid-cell">
    <p class="u-bgGrayLight">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
  </div>
  <div class="o-grid-cell">
    <p class="u-bgGrayLight">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="o-grid-cell">
    <p class="u-bgGrayLight">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
  </div>
</div>

Remove Gutters

Remove the gutter padding between grid cells by adding the o-grid--noGutter modifier class.

<div class="o-grid  o-grid--autoFit  o-grid--noGutter">
  <div class="o-grid-cell">
    <img src="https://unsplash.it/g/200/200" class="u-sizeFull">
  </div>
  <div class="o-grid-cell">
    <img src="https://unsplash.it/g/220/220" class="u-sizeFull">
  </div>
  <div class="o-grid-cell">
    <img src="https://unsplash.it/g/240/240" class="u-sizeFull">
  </div>
</div>

<div class="o-grid  o-grid--autoFit  o-grid--noGutter">
  <div class="o-grid-cell">
    <img src="https://unsplash.it/g/300/300" class="u-sizeFull">
  </div>
  <div class="o-grid-cell">
    <img src="https://unsplash.it/g/320/320" class="u-sizeFull">
  </div>
  <div class="o-grid-cell">
    <img src="https://unsplash.it/g/340/340" class="u-sizeFull">
  </div>
</div>

Horizontal Alignment

Horizontally align grid cells to the left, center, or right using one of the available modifier classes.

Class Name	Description
`o-grid--alignCenter`	center-align all child `o-grid-cell`
`o-grid--alignRight`	right-align all child `o-grid-cell`
`o-grid--alignLeft`	left-align all child `o-grid-cell`

I'm aligned center!

<!-- Center align columns -->
<div class="o-grid  o-grid--alignCenter">
  <div class="o-grid-cell  u-size3of8  u-size4of12">
    <p class="u-bgGrayLight">I'm aligned center!</p>
  </div>
</div>

Vertical Alignment

Vertically align grid cells to the top, middle, or bottom using one of the available modifier classes.

Class Name	Description
n/a	Top is the default alingment of the grid cells.
`o-grid--alignMiddle`	middle-align all child `o-grid-cell`
`o-grid--alignBottom`	bottom-align all child `o-grid-cell`

I'm vertically aligned at the middle!

Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in.

I'm vertically aligned at the middle!

<!-- Middle align columns -->
<div class="o-grid  o-grid--alignMiddle">
  <div class="o-grid-cell  u-sm-size4of4  u-size2of8  u-size4of12">
    <p class="u-bgGrayLight">I'm vertically aligned at the middle!</p>
  </div>

  <div class="o-grid-cell  u-sm-size4of4  u-size2of8  u-size4of12">
    <p class="u-bgGrayLight">Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in.</p>
  </div>

  <div class="o-grid-cell  u-sm-size4of4  u-size2of8  u-size4of12">
    <p class="u-bgGrayLight">I'm vertically aligned at the middle!</p>
  </div>
</div>