Grid

Our grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. But most importantly it is simple. It is based on a 12 column system as shown below:

<div class="default-container">
   <div class="row">
      <div class="col-2">Col 2</div>
      <div class="col-2">Col 2</div>
      <div class="col-8">Col 8</div>
   </div>
   <div class="row">
      <div class="col-6">Col 6</div>
      <div class="col-6">Col 6</div>
   </div>
</div>

Margins

If you wish you can remove the margins with the no-margin class applied to the column

<div class="default-container">
   <div class="row">
      <div class="col-2 no-margin">Col 2</div>
      <div class="col-2 no-margin">Col 2</div>
      <div class="col-8 no-margin">Col 8</div>
   </div>
   <div class="row">
      <div class="col-6 no-margin">Col 6</div>
      <div class="col-6 no-margin">Col 6</div>
   </div>
</div>

Nested rows and columns

Should you need to, you can nest rows and columns

Vertical and horizontally align columns

You may need to vertically or horizontally align columns, this can easily be achieved once the row has a min-height property.

<div class="default-container">
   <div class="row">
      <div class="col-2">Col 2</div>
      <div class="col-2">Col 2</div>
      <div class="col-8">Col 8</div>
   </div>
   <div class="row min-h-[400px]">
      <div class="col-6 v-a h-a">Col 6</div>
      <div class="col-6 v-a h-a">Col 6</div>
   </div>
</div>