Grid

Basic grids

Grids are made up of 3 parts:

• A .cads-grid-container wrapper element
• One or more .cads-grid-row elements to demarcate grid rows
• A combination of .cads-grid-col-* classes to demarcate grid columns

<div class="cads-grid-container">
  <div class="cads-grid-row">
    <div class="cads-grid-col-8">
      <div class="grid-example">
        This text is constrained to 8 columns
      </div>
    </div>
  </div>
</div>

Multi-column grids

Grids are 12 columns by default (although this can be configured by overriding the $cads-grid-columns variable). You can combine a number of column sizes within a grid row.

<div class="cads-grid-container">
  <div class="cads-grid-row">
    <div class="cads-grid-col-8">
      <div class="grid-example">8 columns</div>
    </div>
    <div class="cads-grid-col-4">
      <div class="grid-example">4 columns</div>
    </div>
  </div>
</div>

Responsive grids

If you want variable grid columns at different breakpoints you can use sm, md, and lg variants of the .cads-grid-col classes to control this.

The following example has a column which is 10 columns at large breakpoints, 8 at medium breakpoints, and full-width at small breakpoints.

<div class="cads-grid-container">
  <div class="cads-grid-row">
    <div class="cads-grid-col-md-8 cads-grid-col-lg-10">
      <div class="grid-example">I vary based on breakpoint</div>
    </div>
  </div>
</div>