2 Layout

Application of the grid; defines how Modules are positioned.

2.1 Container

The main container

<div class="container"></div>

2.1.1 Container Intro

The first heading of the main container

Make the most of your `WebView`

Because it will help you.

<div class="container">
  <div class="container-intro">
    <h2>Make the most of your <code>WebView</code></h2>
    <p>Because it will help <a href="#">you</a>.</p>
  </div>
</div>

2.2 Row

A class that resets the row within a container.

.row--ltr

Explicitly set the column direction from left to right

.row--rtl

Explicitly set the column direction from right to left

.row--full

Full width row for breakout sections

<div class="row {$modifiers}"></div>

2.3 Simple Grid

Very simple grid classes. Most of the site’s grid is built into the appropriate modules for better responsive styling. When you just need a simple 3-up grid, this is the answer.

.grid-1-of-2

Span one of two columns

.grid-1-of-3

Span one of three columns

.grid-2-of-3

Span two of three columns