Splendid layouts

Grid Simple

grid-simple uses CSS Grid to create customizable grids. Use --cols to change the number of columns created by grid-simple.

Simple, Elegant, and Customizable Grid

Create flexible grids with ease. Just use the [--cols] variable to specify the number of columns you want.

index.html
<!-- 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.

index.html
<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.

index.html
<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!

index.html
<div class="grid-simple md:[--cols:2] lg:[--cols:3]">
  ...
</div>
Resize to see this work!