Simple Grid

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

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="SimpleGrid [--cols:2]">
  <div>...</div>
  <div>...</div>
</div>

<!-- 3 Columns -->
<div class="SimpleGrid [--cols:3]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

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="SimpleGrid [--cols:6]">
  <div>...</div>
  <div class="[--span:2]">...</div>
  <div class="[--span:3]">...</div>
</div>

Automatically flows to the next row just like you would expect

If the child exceeds the number of columns, it will automatically flow to the next row.

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

Dense supported

Use dense if you wish to fill up spaces with smaller items that come afterwards.

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

Responsive grids are super easy

You can use Tailwind responsive modifiers to update --cols and --span on the fly to make any responsive grid you want!

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

Resize to see this work!

No minmax nonsense

CSS Grids are notorious to get right because you need minmax(0, <insert-value-here>) or your grid items will overflow.

No such nonsesne here. SimpleGrid takes care of this for you.

Resize to see this work!

Basic Usage

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

If you don’t want to use Tailwind, you can still use --cols directly as an inline style, but you won’t be able to make easy responsive grids with SimpleGrid.

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

<div class="SimpleGrid" style="--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.

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

<div class="SimpleGrid" style="--cols:2; --gap:2rem">
  <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="SimpleGrid [--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="SimpleGrid [--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

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

<div class="SimpleGrid 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="SimpleGrid [--cols:6]">
  <div class="[--span:2] md:[--span:3]">...</div>
  <div class="[--span:2] md:[--span:3]">...</div>
  <div class="[--span:2] md:[--span:3]">...</div>
  <div class="[--span:2] md:[--span:3]">...</div>
  <div class="[--span:2] md:[--span:3]">...</div>
  <div class="[--span:2] md:[--span:3]">...</div>
</div>

Ordering Content

When using Grids, you may find that you need to order content such that:

Content comes before Image on mobile
Image come before Content on desktop

This can be done easily by using Tailwind’s order class on each grid item.

<div class="SimpleGrid md:[--cols:2]">
  <div class="order-1">Content</div>
  <div class="order-2 md:order-[0]">
    <img src="..." alt="..." />
  </div>
</div>

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Here’s the CSS for SimpleGrid.

The astro-island and astro-slot selectors help to alleviate styling frustrations when using Astro.

.SimpleGrid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: var(--gap, 1rem);
  width: 100%;
  max-width: 100%;
  margin-inline: auto;

  > *,
  > *:where(astro-island, astro-slot) > * {
    grid-column-end: span var(--span, 1);
  }
}

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Simple Grid CSS Variables

CSS Variable	Default	Description
`--gap`	`1rem`	Gap between columns
`--cols`	`1`	Number of columns

Children CSS Variables

CSS Variable	Default	Description
`--span`	`1`	Number of columns that the child should occupy.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.