Columns
@sgroup/tailwind-plugins/columns
Our grid system is a tiny layer of flexbox utilities, combined with Tailwind's width classes. We add .row and .col classes, which adds:
- Auto full-width on mobile
- Sensible defaults for padding (with small/no padding option)
- Not having to write
flex flex-wrapall the time.
<div class="container">
<div class="row">
<div class="col sm:w-1/3">
Column 1
</div>
<div class="col sm:w-1/3">
Column 2
</div>
<div class="col sm:w-1/3">
Column 3
</div>
</div>
</div>
<div class="container">
<div class="row row-small">
<div class="col sm:w-1/3">
Column 1
</div>
<div class="col sm:w-1/3">
Column 2
</div>
<div class="col sm:w-1/3">
Column 3
</div>
</div>
</div>
As usual, you can override padding and other classes at the template level as well.
<div class="container">
<div class="row -mx-0">
<div class="col sm:w-1/3 px-0">
Column 1
</div>
<div class="col sm:w-1/3 px-0">
Column 2
</div>
<div class="col sm:w-1/3 px-0">
Column 3
</div>
</div>
</div>
You can also completely use Tailwind classes to achieve the same result.
<div class="container">
<div class="flex flex-wrap -mx-4">
<div class="w-full px-4 xs:w-1/2">
Column 1
</div>
<div class="w-full px-4 xs:w-1/2">
Column 2
</div>
</div>
</div>
Configuration
Configure the @sgroup/tailwind-plugins/columns plugin using theme options.
theme: {
column: (theme) => {
return {
padding: theme('padding.8'),
};
},
},