Simple, Elegant, and Customizable Grid
Create flexible grids with ease. Just use the [--cols] variable to specify the number of columns you want.
<!-- 2 Columns --><div class="grid-simple [--cols:2]"> <div>...</div> <div>...</div></div>
<!-- 3 Columns --><div class="grid-simple [--cols:3]"> <div>...</div> <div>...</div> <div>...</div></div>No minmax nonsense
grid-simple includes minmax declarations so you don’t have to. Grid items will never overflow (unless you want them to).
Children can span any number of columns
Just change the --span variable to change the number of columns a child spans. All children span 1 column by default.
<div class="grid-simple [--cols:6]"> <div>...</div> <div class="[--span:2]">...</div> <div class="[--span:3]">...</div></div>Excess items automatically flow to the next row
If the child [--span] causes it to exceed the number of columns, it will automatically flow to the next row.
Dense supported
Use dense if you wish to fill up spaces with smaller items that come afterwards.
<div class="grid-simple [--cols:6] dense"> ...</div>Responsive grids are super easy
Use Tailwind responsive modifiers to update --cols and --span on the fly to make responsive grids — without context-switching by leaving your HTML!
<div class="grid-simple md:[--cols:2] lg:[--cols:3]"> ...</div> Resize to see this work!