Basic Usage

Using grid-simple is easy. Just use [--cols] to specify the number of columns you want for your grid!

<div class="grid-simple [--cols:2]">
  <div>...</div>
  <div>...</div>
</div>

Changing the gap between grid items

Change the gap between grid items with the gap property or the --gap variable. The difference is --gap is automatically inherited from ancestor elements while gap is not.

<div class="grid-simple [--cols:2] gap-8">
  <div>...</div>
  <div>...</div>
</div>

Spanning multiple columns

Grid items can span multiple columns by using the --span variable. The default value is 1.

<div class="grid-simple [--cols:6]">
  <div>...</div>
  <div class="[--span:2]">...</div>
  <div class="[--span:3]">...</div>
</div>

Dense

You can use dense to make the grid items fill in the empty spaces left by larger grid items.

<div class="grid-simple [--cols:6] dense">
  <div>...</div>
  <div class="[--span:2]">...</div>
  <div class="[--span:4]">...</div>
  <div class="[--span:2]">...</div>
  <div>...</div>
</div>

Responsive Behaviour

grid-simple lets you change the number of columns easily with Tailwind responsive modifiers. Resize the following demo to see this in action!

<div class="grid-simple md:[--cols:2] lg:[--cols:3]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Responsive spans

You can also change --span in addition to changing --cols. Below is an example where we change --span and kept --cols the same.

<div class="grid-simple [--cols:6]">
  <div class="[--span:2] @bp6:[--span:1]">...</div>
  <div class="[--span:2] @bp6:[--span:1]">...</div>
</div>