Grid

A 12-column responsive grid for laying out pages

Overview #

Use the grid to lay out your page.

Examples #

The examples on this page are best viewed in a new window.

Choose an example

<div class="rvt-container-sm [ rvt-bg-blue-100 ]">
  <span>SM</span>
</div>

<div class="rvt-container-md [ rvt-bg-blue-100 rvt-m-top-md ]">
  <span>MD</span>
</div>

<div class="rvt-container-lg [ rvt-bg-blue-100 rvt-m-top-md ]">
  <span>LG</span>
</div>

<div class="rvt-container-xl [ rvt-bg-blue-100 rvt-m-top-md ]">
  <span>XL</span>
</div>

Open in new window Copy link to example

<div class="rvt-container-xl">

  <!-- Columns with normal space between -->
  
  <div class="rvt-row">
    <div class="rvt-cols">
      <div class="rvt-bg-blue-100">Column</div>
    </div>
    <div class="rvt-cols">
      <div class="rvt-bg-orange-100">Column</div>
    </div>
    <div class="rvt-cols">
      <div class="rvt-bg-green-100">Column</div>
    </div>
    <div class="rvt-cols">
      <div class="rvt-bg-purple-100">Column</div>
    </div>
  </div>

  <!-- Columns with more space between -->

  <div class="rvt-row rvt-row--loose [ rvt-m-top-md ]">
    <div class="rvt-cols">
      <div class="rvt-bg-blue-100">Column</div>
    </div>
    <div class="rvt-cols">
      <div class="rvt-bg-orange-100">Column</div>
    </div>
    <div class="rvt-cols">
      <div class="rvt-bg-green-100">Column</div>
    </div>
    <div class="rvt-cols">
      <div class="rvt-bg-purple-100">Column</div>
    </div>
  </div>

  <!-- Columns with less space between -->

  <div class="rvt-row rvt-row--tight [ rvt-m-top-md ]">
    <div class="rvt-cols">
      <div class="rvt-bg-blue-100">Column</div>
    </div>
    <div class="rvt-cols">
      <div class="rvt-bg-orange-100">Column</div>
    </div>
    <div class="rvt-cols">
      <div class="rvt-bg-green-100">Column</div>
    </div>
    <div class="rvt-cols">
      <div class="rvt-bg-purple-100">Column</div>
    </div>
  </div>

</div>

Open in new window Copy link to example

<div class="rvt-container-xl">
  <div class="rvt-row">
    <div class="rvt-cols-lg [ rvt-m-bottom-md ]">
      <div class="rvt-bg-blue-100">Column</div>
    </div>
    <div class="rvt-cols-lg [ rvt-m-bottom-md ]">
      <div class="rvt-bg-orange-100">Column</div>
    </div>
    <div class="rvt-cols-lg [ rvt-m-bottom-md ]">
      <div class="rvt-bg-green-100">Column</div>
    </div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-container-xl">
  <div class="rvt-row">
    <div class="rvt-cols-2-md">
      <div class="rvt-bg-blue-100">Column</div>
    </div>
    <div class="rvt-cols-6-md">
      <div class="rvt-bg-orange-100">Column</div>
    </div>
    <div class="rvt-cols-4-md">
      <div class="rvt-bg-green-100">Column</div>
    </div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-container-xl">
  <div class="rvt-row">
    <div class="rvt-cols">
      <div class="rvt-bg-blue-100">Column</div>
    </div>
    <div class="rvt-cols-6-md">
      <div class="rvt-bg-orange-100">Column</div>
    </div>
    <div class="rvt-cols">
      <div class="rvt-bg-green-100">Column</div>
    </div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-container-xl">
  <!-- Outer grid -->
  <div class="rvt-row">
    <div class="rvt-cols-6-md">
      <p class="rvt-bg-blue-100">One-half</p>
      <!-- Inner grid -->
      <div class="rvt-row">
        <div class="rvt-cols-6-md">
          <p class="rvt-bg-green-100">One-quarter</p>
        </div>
        <div class="rvt-cols-6-md">
          <p class="rvt-bg-green-100">One-quarter</p>
        </div>
      </div>
      <!-- End inner grid -->
    </div>
  </div>
  <!-- End outer grid -->
</div>

Open in new window Copy link to example

<div class="rvt-container-xl">
  <div class="rvt-row">
    <div class="rvt-cols-4-md rvt-cols-push-8-md">
      <div class="rvt-bg-blue-100">First column</div>
    </div>
    <div class="rvt-cols-8-md rvt-cols-pull-4-md">
      <div class="rvt-bg-green-100">Second column</div>
    </div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-container-xl">
  <div class="rvt-row">
    <div class="rvt-cols-4-md">
      <div class="rvt-bg-blue-100">Column</div>
    </div>
    <div class="rvt-cols-3-md rvt-cols--last">
      <div class="rvt-bg-green-100">Column</div>
    </div>
  </div>
</div>

Usage #

Containers can be used on their own. Containers are designed to be generic wrappers for content. They are centered by default and add whitespace to the left and right of the content so that it does not run up against the edge of the viewport.
Containers are required to use the grid. Row and column elements must appear within an element with a .rvt-container-* class. See the code examples on this page for guidance.
All column elements must be children of a row element. Elements with the .rvt-cols-* classes must be children of an element with the .rvt-row class. See the code examples on this page for guidance.
Column widths must not exceed 12. If you are setting explicit column widths, the total column widths in a given row must not be more than 12.
Only use one parent container when nesting grids. If you are nesting one grid inside another, you only need one container element wrapping the outermost grid. Do not wrap the nested grid in its own container. See the “Nested grids” code example on this page for guidance.
Do not nest one row directly within another. An element with the .rvt-row class cannot be a direct child of another element with the .rvt-row class. Nested rows must appear within a parent element with a .rvt-cols-* class. See the “Nested grids” code example on this page for guidance.

Do

Use for the overall layout of your website or application
Use to create sidebars, 3-column feature grids, and other common page layout patterns
Use the spacing utilities to add margins and padding to grid elements

Don't

Use for fine-tuning the position of elements within a single component—use the flex utilities instead
Use to constrain the width of a single element like a form field—use the width utilities instead
Nest grids more than two levels deep