Living style guide / Grid

Examples of classing for columns

Create a div and give it the class "grid" on the wrapper. Then choose one of these three options to chain in with that class:

• "grid--2-column"
• "grid--3-column"
• "grid--4-column"

After chaining the right grid class to "grid," make sure you add that many divs inside the wrapper. So class="grid grid--3-column" should have three divs with content in them. They will stretch across the content container horizontally. See the examples below!

2-column

3-column

4-column

Breakouts on 1-column pages

If you want to get really fancy, you can add the class "breakout-container" into the classes on the wrapper to get a grid that breaks out of the container boundaries. So class="breakout-container grid grid--3-column" should have three divs with content in them which will stretch full-width horizontally. See the examples below!.

3-column full-width

4-column full-width

The grids are completely responsive and will shift to accommodate different viewports. If you put an image inside a grid div and want it to fill the column, be sure to add style="width: 100%;" to the img tag.