Grid

Intro

• 12-column responsive, mobile-first
• Use Grid to create horizontal groups of Grid-cells.
• Content should be placed within Grid-cells, and only Grid-cells may be immediate children of Grid.
• Grid-cells create gutters via padding. That padding is offset in Grid for the first and last Grid-cell via negative margin on Grid.
  • Override gutters with Grid--withoutGutter.
  • If the Grid is intended to stretch 100% of the window's width, set horizontal margin to 0 (.u-mH0).
• Grid-cell width can be set via Size Utilities
• Grid-cells will wrap if their combined width is greater than 100%;

Standard

By default, the standard gutter Grid-cell class has left and right padding of 16px/1.6rem

<div class="Grid">
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgGrayLighter u-fontWeight400">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgGrayLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgGrayLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgGrayLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgGrayLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgGrayLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2"><div class="u-bgGrayLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2"><div class="u-bgGrayLighter">CELL</div></div>
</div>

Without Gutter

Use Grid--withoutGutter to set the grid margin to 0. The left and right padding of all child Grid-cell elements will also be set to 0

<div class="Grid Grid--withoutGutter">
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgGrayLighter u-fontWeight400">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgGrayLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgGrayLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgGrayLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgGrayLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgGrayLighter">CELL</div></div>
</div>

Nested (Flush)

In order for the nested elements to be flush with the parent Grid-cell, add the Grid element, which contains a negative left and right margin

<div class="Grid">
  <div class="Grid-cell u-sizeFull">
    <div class="Grid u-bgGrayLighter">
      <div class="Grid-cell u-md-size1of2">
        <div class="u-bgGrayLight">CELL</div>
      </div>
      <div class="Grid-cell u-md-size1of2">
        <div class="u-bgGrayLight">CELL</div>
      </div>
    </div>
  </div>
</div>

Nested (Not Flush)

Not adding the Grid-cell element will ensure the nested Grid-cell adheres to the padding of the parent Grid-cell

<div class="Grid">
  <div class="Grid-cell u-sizeFull u-bgGrayLighter">
    <div class="Grid-cell u-md-size1of2">
      <div class="u-bgGrayLight">CELL</div>
    </div>
    <div class="Grid-cell u-md-size1of2 u-bgGrayLighter">
      <div class="u-bgGrayLight">CELL</div>
    </div>
  </div>
</div>

Centered Cell

Center Aligned – Use Grid-cell--centered to center a single Grid-cell.

<div class="Grid u-block">
  <div class="Grid-cell u-block Grid-cell--center u-size1of2">
    <div class="u-bgGrayLighter u-fontWeight400">CENTERED CELL</div>
  </div>
</div>
 (The `u-block` class is used to override the current page's wrapper which is using `ContainerWrap` which will give the `Grid and` `Grid-cell` classes the `display: table-cell` style. It is not needed otherwise.)

Center Align Cells

Center Aligned – Use Grid--alignCenter to center multiple Grid-cells. Note: This also will change the text alignment of the content in the grid to center align

<div class="Grid Grid--alignCenter">
  <div class="Grid-cell u-size1of3">
    <div class="u-bgGrayLighter u-fontWeight400">CELL</div>
  </div>
  <div class="Grid-cell u-size1of3">
    <div class="u-bgGrayLighter u-fontWeight400">CELL</div>
  </div>
</div>

Right Aligned Cells

Use Grid--alignRight to change the order of Grid-cells and set the text alignment to text-align: right

<div class="Grid Grid--alignRight">
  <div class="Grid-cell u-size1of3">
    <div class="u-bgGrayLighter u-fontWeight400">CELL</div>
  </div>
  <div class="Grid-cell u-size1of3">
    <div class="u-bgGrayLighter u-fontWeight400">CELL</div>
  </div>
</div>

Size

sizeXof2

Utilizing the class u-size[X]of2, where X is replaced by an integer less than or equal to two (typically, 1 is the only utilized value in this case), will size the element amongst a two-column layout accordingly. For example, a class of u-size1of2 will size the element as if it were one column out of a two-column layout (i.e. 50% width).

<div class="u-cf">
  <div class="u-size1of2 u-bgGrayLighter">
    1of2
  </div>
</div>

sizeXof3

Utilizing the class u-size[X]of3, where X is replaced by an integer less than or equal to three, will size the element amongst a three-column layout accordingly. For example, a class of u-size2of3 will size the element as if it were two columns-wide out of a three-column layout (i.e. ~66% width).

<div class="u-cf">
  <div class="u-size1of3 u-bgGrayLighter">1of3</div>
  <div class="u-size2of3 u-bgGrayLighter">2of3</div>
</div>

sizeXof4

Utilizing the class u-size[X]of4, where X is replaced by an integer less than or equal to four, will size the element amongst a four-column layout accordingly. For example, a class of u-size3of4 will size the element as if it were three columns-wide out of a four-column layout (i.e. 75% width).

<div class="u-cf">
  <div class="u-size1of4 u-bgGrayLighter">1of4</div>
  <div class="u-size2of4 u-bgGrayLighter">2of4</div>
  <div class="u-size3of4 u-bgGrayLighter">3of4</div>
</div>

sizeXof6

Utilizing the class u-size[X]of6, where X is replaced by an integer less than or equal to six, will size the element amongst a six-column layout accordingly. For example, a class of u-size4of6 will size the element as if it were four columns-wide out of a six-column layout (i.e. ~66% width).

<div class="u-cf">
  <div class="u-size1of6 u-bgGrayLighter">1of6</div>
  <div class="u-size2of6 u-bgGrayLighter">2of6</div>
  <div class="u-size3of6 u-bgGrayLighter">3of6</div>
  <div class="u-size4of6 u-bgGrayLighter">4of6</div>
  <div class="u-size5of6 u-bgGrayLighter">5of6</div>
</div>

sizeXof8

Utilizing the class u-size[X]of8, where X is replaced by an integer less than or equal to eight, will size the element amongst a eight-column layout accordingly. For example, a class of u-size3of8 will size the element as if it were three columns-wide out of an eight-column layout (i.e. 38.5% width).

<div class="u-cf">  
  <div class="u-size1of8 u-bgGrayLighter">1of8</div>
  <div class="u-size2of8 u-bgGrayLighter">2of8</div>
  <div class="u-size3of8 u-bgGrayLighter">3of8</div>
  <div class="u-size4of8 u-bgGrayLighter">4of8</div>
  <div class="u-size5of8 u-bgGrayLighter">5of8</div>
  <div class="u-size6of8 u-bgGrayLighter">6of8</div>
  <div class="u-size7of8 u-bgGrayLighter">7of8</div>
</div>

sizeXof10

Utilizing the class u-size[X]of10, where X is replaced by an integer less than or equal to ten, will size the element amongst a ten-column layout accordingly. For example, a class of u-size4of10 will size the element as if it were four columns-wide out of a ten-column layout (i.e. 40% width).

<div class="u-cf">
  <div class="u-size1of10 u-bgGrayLighter">1of10</div>
  <div class="u-size2of10 u-bgGrayLighter">2of10</div>
  <div class="u-size3of10 u-bgGrayLighter">3of10</div>
  <div class="u-size4of10 u-bgGrayLighter">4of10</div>
  <div class="u-size5of10 u-bgGrayLighter">5of10</div>
  <div class="u-size6of10 u-bgGrayLighter">6of10</div>
  <div class="u-size7of10 u-bgGrayLighter">7of10</div>
  <div class="u-size8of10 u-bgGrayLighter">8of10</div>
  <div class="u-size9of10 u-bgGrayLighter">9of10</div>
</div>

sizeXof12

Utilizing the class u-size[X]of12, where X is replaced by an integer less than or equal to twelve, will size the element amongst a twelve-column layout accordingly. For example, a class of u-size3of12 will size the element as if it were three columns-wide out of a twelve-column layout (i.e. 25% width).

<div class="u-cf">
  <div class="u-size1of12 u-bgGrayLighter">1of12</div>
  <div class="u-size2of12 u-bgGrayLighter">2of12</div>
  <div class="u-size3of12 u-bgGrayLighter">3of12</div>
  <div class="u-size4of12 u-bgGrayLighter">4of12</div>
  <div class="u-size5of12 u-bgGrayLighter">5of12</div>
  <div class="u-size6of12 u-bgGrayLighter">6of12</div>
  <div class="u-size7of12 u-bgGrayLighter">7of12</div>
  <div class="u-size8of12 u-bgGrayLighter">8of12</div>
  <div class="u-size9of12 u-bgGrayLighter">9of12</div>
  <div class="u-size10of12 u-bgGrayLighter">10of12</div>
  <div class="u-size11of12 u-bgGrayLighter">11of12</div>
</div>

Responsive

Multiple classes can be applied to a single container element which will mandate how it appears in a responsive layout. There are three different classes that can be set which represent a width-specific breakpoint: u-sm-size[X]of[Y] for small layouts, u-md-size[X]of[Y] for medium layouts, and u-lg-size[X]of[Y] for large layouts. These classes follow the same construct as the other Size classes, where X is a number of columns within a Y-column layout.

<div class="u-size12of12 u-sm-size9of12 u-md-size6of12 u-lg-size3of12 u-bgGrayLighter">12of12 -&gt; 9of12 -&gt; 6of12 -&gt; 3of12</div>

sizeFit & sizeFill

Container-type elements can be set to change size depending on their contents. This can also affect other container widths as they will flex in response. In order to set this up, apply the .u-sizeFit class to the container that will have the set width. This width will be determined by the u-sizeFit element’s children, which should have set widths (such as images or icons). Apply u-sizeFill to the other element which will flex its width accordingly. Please note that u-sizeFit will float its content to the left side of the layout.

<div class="u-cf">
  <div class="u-sizeFit">
    <div class="u-bgGrayLightest" style="height:50px;width:50px;"></div>
  </div>
  <div class="u-sizeFill u-bgGrayLighter">
    Content
  </div>
</div>

sizeFit & sizeFill Alt

The alternative version of sizeFit works the same, with the exception that the element will instead float to the right side of the layout. Please note that the class name changes to u-sizeFitAlt as well.

<div class="u-cf">
  <div class="u-sizeFitAlt">
    <div class="u-bgGrayLightest" style="height:50px;width:50px;"></div>
  </div>
  <div class="u-sizeFill u-bgGrayLighter">
    Content
  </div>
</div>

sizeFull

Elements that utilize the u-sizeFull class will span across the entire available width allowed by its parent element, and will not be affected by any other sibling layout element.

<div class="u-cf">
  <div class="u-sizeFull u-bgGrayLighter">
    Full
  </div>
</div>

sizeFullHeight

The class u-sizeFullHeight works similarly to sizeFull, with the added effect of the element spanning vertically across the entire available layout as well.

<div class="u-cf" style="height: 300px;">
  <div class="u-sizeFull u-sizeFullHeight u-bgGrayLighter">
    Full Height
  </div>
</div>

Offset

The Offset classes are used to push a cell to the left or right with margins using the same familiar column widths. Options include xof2, xof3, xof4, xof5, xof6, xof8, xof10, xof12 with an option to use the -sm-, -md- and -lg- breakpoint prefixes.

After

Use u-after[x]of[n] to add a margin-left to the element. You can use u-afterNone to reset the margin-left style to 0

<div class="u-cf">
  <div class="u-after1of2 u-bgGrayLighter u-mB2">1of2</div>
</div>

Before

Use u-before[x]of[n] to add a margin-right to the element. You can use u-beforeNone to reset the margin-right style to 0

<div class="u-cf">
  <div class="u-before1of2 u-bgGrayLighter u-mB2">1of2</div>
</div>

Note: Offset classes should be used along with Grid-cell classes.

Best Practice: While the Offset classes can be used to center one or more cells, using the Grid-cell—centered modifier is cleaner with fewer classes to override.

Order

Order classes are used along with Size classes to change the order of markup visually on screen. The Order classes are used to push a cell to the left or right with left/right positioning property. The Order classes are similar to the Size class pattern (xof2, xof3, xof4, xof5, xof6, xof8, xof10, xof12) with an option to use the -sm-, -md- and -lg- breakpoint prefixes.

There are two Order classes:

• Push – Use Push to add a left style to the element
• Pull – Use Pull to add a right style to the element

Normal

<div class="Grid">
  <div class="Grid-cell u-md-push1of2 u-md-size1of2">
    <div class="u-bgGratLighter u-pV4">1st in Markup</div>
  </div>
  <div class="Grid-cell u-md-pull1of2 u-md-size1of2">
    <div class="u-bgGrayLight u-pV4">2nd in Markup</div>
  </div>
</div>

Note: When using the Order classes with the Size classes it is easier to use the same [X]of[Y] pattern that the Size class is using. For example, if an element has u-size3of8 then it is best practice to use u-pull[X]of8 or u-push[X]of8.

Similar to the Offset class, the [X] of the Size and Push/Pull pattern when added together should be equal to or less than [Y]. For example, if there are two elements, the first would be u-size3of8 .u-push5of8 while the second element would be u-size5of8 .u-pull3of8. In both cases the [X] of the Size and Pull classes equals 8.

Best Practice: At the Desktop breakpoint you have a two-column page layout. But at the Mobile breakpoint, you want the content in the right column at the Desktop breakpoint to be above the content in the left column. In the HTML markup, the right column would be before the left column, so use the Push and Pull classes to reorder the markup correctly at the Desktop breakpoint.