Grids

Overview

While we offer some simple "point-and-click" options for creating grid layouts for your page content, our responsive grid system allows for much more variety and customization.

How To Use

Building a grid layout on Twenty Over Ten is very simple. To setup your grid you must do the following:

• Add a row container
• Add your desired column elements

Viewport widths across multiple devices include:

• col-xs (phones at < 768px)
• col-sm (tablets at ≥ 768px)
• col-md (laptop at ≥ 992px)
• col-lg (desktop at ≥ 1200px)

Column sizes can be chained by using col-xs-, col-sm-, col-md-, and col-lg- class prefixes in a row to build responsive layouts.

<!-- General Setup Structure -->
<div class="row">
  <div class="col-[size]-[width]"></div>
</div>

Offsets

Within a div element with the class of row, add a div element with col-xs-offset-, col-sm-offset-, col-md-offset-, or col-lg-offset- classes along with the number of columns (from 1 to 12) you would want to offset columns.

<div class="row">
  <div class="col-xs-offset-7 col-sm-5">
    <!-- Insert Content Here -->
  </div>
</div>

Alignment

Add start-, center-, end-, top-, or bottom- classes to a div element with the class of row to align elements. Much like column sizes, alignment sizes can also be targeted to display to the viewport of your choice and chained in a row using the viewport widths xs, sm, md, and lg.

<div class="row center-xs end-sm start-md">
  <div class="col-xs-12 col-sm-6">
    <!-- Insert Content Here -->
  </div>
  <div class="col-xs-12 col-sm-6">
    <!-- Insert Content Here -->
  </div>
</div>