Grid System

How it works

Outloud's grid system uses series of rules to layout and align content. It's build with grid and is fully responsive.

To start with grid system, simply wrap create grid container using columns class.

01
02
03
<div class="columns">
  <div class="col-4">01</div>
  <div class="col-4">02</div>
  <div class="col-4">03</div>
</div>

Offset

01
02
03
04
<div class="columns">
  <div class="col-3">01</div>
  <div class="col-3 offset-10">02</div>
  <div class="col-3 offset-4">03</div>
  <div class="col-3">04</div>
</div>

Breakpoints

01
02
<div class="columns">
  <div class="col-12 md:col-6">01</div>
  <div class="col-12 md:col-6">02</div>
</div>
Table of Contents