Basic usage
<div class="container">
<div class="columns mb-4">
<div class="column w-1/12"><div class="bg-coral">w-1/12</div></div>
<div class="column w-11/12"><div class="bg-coral">w-11/12</div></div>
</div>
<div class="columns mb-4">
<div class="column w-1/6"><div class="bg-coral">w-1/6</div></div>
<div class="column w-5/6"><div class="bg-coral">w-5/6</div></div>
</div>
<div class="columns mb-4">
<div class="column w-1/4"><div class="bg-coral">w-1/4</div></div>
<div class="column w-3/4"><div class="bg-coral">w-3/4</div></div>
</div>
<div class="columns mb-4">
<div class="column w-1/3"><div class="bg-coral">w-1/3</div></div>
<div class="column w-2/3"><div class="bg-coral">w-2/3</div></div>
</div>
<div class="columns mb-4">
<div class="column w-5/12"><div class="bg-coral">w-5/12</div></div>
<div class="column w-7/12"><div class="bg-coral">w-7/12</div></div>
</div>
<div class="columns mb-4">
<div class="column w-1/2"><div class="bg-coral">w-1/2</div></div>
<div class="column w-1/2"><div class="bg-coral">w-1/2</div></div>
</div>
</div>
Auto fill
<div class="container">
<div class="columns">
<div class="column w-1/1">
<div class="bg-coral">Column 1</div>
</div>
<div class="column flex-1">
<div class="bg-coral">Column 2</div>
</div>
</div>
</div>
Breakpoints
<div class="container">
<div class="columns">
<div class="column w-1/2 md:w-1/3">
<div class="bg-coral">w-1/2 md:w-1/3</div>
</div>
<div class="column w-1/2 md:w-2/3">
<div class="bg-coral">w-1/2 md:w-2/3</div>
</div>
</div>
</div>
Wrapping columns with responsive vertical spacing
<div class="container">
<div class="columns flex-wrap">
<div class="column w-full md:w-1/4 pt-4 md:pt-0">
<div class="bg-coral w-full h-full">1</div>
</div>
<div class="column w-full md:w-1/4 pt-4 md:pt-0">
<div class="bg-coral w-full h-full">2</div>
</div>
<div class="column w-full md:w-1/4 pt-4 md:pt-0">
<div class="bg-coral w-full h-full">3</div>
</div>
<div class="column w-full md:w-1/4 pt-4 md:pt-0">
<div class="bg-coral w-full h-full">4</div>
</div>
</div>
</div>