Grid

.column--full

.column--half

.column--third

.column--two-thirds

.column--fourth

.column--three-fourths

.column--sixth

.column--eighth

.column--half .column--nested

.column--third .column--nested

.column--fourth .column--nested

Grid Example

Example

<!-- Grid with inputs -->
<div class="row example-container">
  <div class="column column--full">
    <fieldset class="row">
      <div class="column column--full column--example">
        <label>Example</label>
        <input type="text">
      </div>
    </fieldset>
    <fieldset class="row">
      <div class="column column--third column--example">
        <label>Example</label>
        <input type="text">
      </div>
      <div class="column column--third column--example">
        <label>Example</label>
        <input type="text">
      </div>
      <div class="column column--third column--example">
        <label>Example</label>
        <input type="text">
      </div>
    </div>
  </div>
</div>

Nested Grid Example

Use the nested grid when stacking cards, which will give you a consistent gutter all around.

box

<!-- Nested Grid with cards -->
<div class="row example-container">
  <div class="column column--full">
    <div class="row row--nested">
      <div class="column column--fourth column--nested">
        <div class="card remove-margin">box</div>
      </div>
      <div class="column column--fourth column--nested">
        <div class="card remove-margin">box</div>
      </div>
      <div class="column column--fourth column--nested">
        <div class="card remove-margin">box</div>
      </div>
      <div class="column column--fourth column--nested">
        <div class="card remove-margin">box</div>
      </div>
    </div>
    <div class="row row--nested">
      <div class="column column--fourth column--nested">
        <div class="card remove-margin">box</div>
      </div>
      <div class="column column--fourth column--nested">
        <div class="card remove-margin">box</div>
      </div>
      <div class="column column--fourth column--nested">
        <div class="card remove-margin">box</div>
      </div>
      <div class="column column--fourth column--nested">
        <div class="card remove-margin">box</div>
      </div>
    </div>
  </div>
</div>