How it works
Grid can be used either inline or in initial way by using class
grid-container-inline or
grid-container
Grid is divided into total of 12 columns.
To span across columns use class
grid-col-span-{number}.
Here the number is range from 1-12.
Two Column Grid
An example of 2 column grid can be done by using
grid-col-span-6 twice, so one div will span for six columns.
Column 1
Column 2
<div class="grid-container">
<div class="grid-col-span-6"></div>
<div class="grid-col-span-6"></div>
</div>
Three Column Grid
An example of 3 column grid can be done by using
grid-col-span-4 thrice, so one div will span for four
columns.
<div class="grid-container">
<div class="grid-col-span-4"></div>
<div class="grid-col-span-4"></div>
<div class="grid-col-span-4"></div>
</div>
Nested Inline Grid Layout
Column 1
Inline Grid Column 1
Inline Grid Column 2
Inline Grid Column 3
<div class="grid-container">
<div class="grid-col-span-6"></div>
<div class="grid-col-span-6">
<div class="grid-container-inline">
<div class="grid-col-span-4"></div>
<div class="grid-col-span-4"></div>
<div class="grid-col-span-4"></div>
</div>
</div>
</div>