Jane Pearson Administrator

# Documentation

Browse source code
Introduction
Alerts Avatars Buttons Colors Cards Charts Form components Tags Typography
Edit this page

## Grid utilities

Quickly and easily create layouts with the basic 12-column.

Work in progress! More detailed documentation is coming soon.

### Basic layout

Create basic grid layout using columns. With `.row` and `.col`, we can easily manipulate the layout.

    <div class="row mb-3">
      <div class="col-12"><div class="h-5 bg-gray-lighter rounded"></div></div>
    </div>
    <div class="row mb-3">
      <div class="col-6"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-6"><div class="h-5 bg-gray-lightest rounded"></div></div>
    </div>
    <div class="row mb-3">
      <div class="col-4"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-4"><div class="h-5 bg-gray-lightest rounded"></div></div>
      <div class="col-4"><div class="h-5 bg-gray-lighter rounded"></div></div>
    </div>
    <div class="row mb-3">
      <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
    </div>
    <div class="row mb-3">
      <div class="col-2"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-2"><div class="h-5 bg-gray-lightest rounded"></div></div>
      <div class="col-2"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-2"><div class="h-5 bg-gray-lightest rounded"></div></div>
      <div class="col-2"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-2"><div class="h-5 bg-gray-lightest rounded"></div></div>
    </div>

### Column spacing

Row provides `.gutters-[size]` attribute to specify spacings between columns.

    <div class="row gutters-0 mb-3">
      <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
    </div>
    <div class="row gutters-xs mb-3">
      <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
    </div>
    <div class="row gutters-sm mb-3">
      <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
    </div>
    <div class="row gutters-md mb-3">
      <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
    </div>
    <div class="row gutters-lg mb-3">
      <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
      <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
    </div>