Grid

Gralig uses simple flexbox based grid system. You can use .col as many as you want inside wrapper .row but we recommend that you use the column sizes below.

This col or span views below are for example to see. They will not show up in normal usage.

Columns

col
col
col
col
col
col
col
col
col
<div class="container">
  <div class="row">
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Column Sizes

col-10
col-16
col-20
col-25
col-30
col-33
col-40
col-50
col-60
col-67
col-70
col-75
col-80
col-84
col-90
col-100
<div class="container">
  <div class="row">
    <div class="col col-10">col-10</div>
  </div>
  <div class="row">
    <div class="col col-16">col-16</div>
  </div>
  <div class="row">
    <div class="col col-20">col-20</div>
  </div>
  <div class="row">
    <div class="col col-25">col-25</div>
  </div>
  <div class="row">
    <div class="col col-30">col-30</div>
  </div>
  <div class="row">
    <div class="col col-33">col-33</div>
  </div>
  <div class="row">
    <div class="col col-40">col-40</div>
  </div>
  <div class="row">
    <div class="col col-50">col-50</div>
  </div>
  <div class="row">
    <div class="col col-60">col-60</div>
  </div>
  <div class="row">
    <div class="col col-67">col-67</div>
  </div>
  <div class="row">
    <div class="col col-70">col-70</div>
  </div>
  <div class="row">
    <div class="col col-75">col-75</div>
  </div>
  <div class="row">
    <div class="col col-80">col-80</div>
  </div>
  <div class="row">
    <div class="col col-84">col-84</div>
  </div>
  <div class="row">
    <div class="col col-90">col-90</div>
  </div>
  <div class="row">
    <div class="col">col-100</div>
  </div>
</div>

Spans (Offsets)

You can use .col-span-* to shift columns from left to specific spaces as below.

col-10col-span-90
col-16col-span-84
col-20col-span-80
col-25col-span-75
col-30col-span-70
col-33col-span-67
col-40col-span-60
col-50col-span-50
col-60col-span-40
col-67col-span-33
col-70col-span-30
col-75col-span-25
col-80col-span-20
col-84col-span-16
col-90col-span-10
<div class="container">
  <div class="row">
    <div class="col col-10 col-span-90">col-10</div>
  </div>
  <div class="row">
    <div class="col col-16 col-span-84">col-16</div>
  </div>
  <div class="row">
    <div class="col col-20 col-span-80">col-20</div>
  </div>
  <div class="row">
    <div class="col col-25 col-span-75">col-25</div>
  </div>
  <div class="row">
    <div class="col col-30 col-span-70">col-30</div>
  </div>
  <div class="row">
    <div class="col col-33 col-span-67">col-33</div>
  </div>
  <div class="row">
    <div class="col col-40 col-span-60">col-40</div>
  </div>
  <div class="row">
    <div class="col col-50 col-span-50">col-50</div>
  </div>
  <div class="row">
    <div class="col col-60 col-span-40">col-60</div>
  </div>
  <div class="row">
    <div class="col col-67 col-span-33">col-67</div>
  </div>
  <div class="row">
    <div class="col col-70 col-span-30">col-70</div>
  </div>
  <div class="row">
    <div class="col col-75 col-span-25">col-75</div>
  </div>
  <div class="row">
    <div class="col col-80 col-span-20">col-80</div>
  </div>
  <div class="row">
    <div class="col col-84 col-span-16">col-84</div>
  </div>
  <div class="row">
    <div class="col col-90 col-span-10">col-90</div>
  </div>
</div>

Grid on Mobile

When the columns come to mobile breakpoint in normal usage, it takes the 100% width of its container. You can prevent this by using .row-mobile and you can maintain column widths on mobile.

col
col
col
<!-- use .row-mobile to prevent columns expanding 100% on mobile -->
<div class="container">
  <div class="row row-mobile">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>
© 2019, Built with  🎧☕️❤️& Gralig.