Grid Repeat Auto

GridRepeatAuto functions like SimpleGrid, except you decide the width of each grid item. Super useful for creating nice and controlled layouts.

Great for width-sensitive content

GridRepeatAuto is perfect when you need you need to size every grid item manually.

One great use-case is a Content + Sidebar layout since both elements need to be sized accordingly.

<div class="GridRepeatAuto [--cols:2]">
  <div class="w-[15rem]"> ... </div>
  <div class="w-[8rem]"> ... </div>
</div>

Psst: Adding width to Grid Repeat Auto items can be far easier than calculating the width of the Simple Grid container! Less headaches!

Automatically centered

This is the behaviour you would use most of the time so we built it in for you. You’re welcome!

<div class="SimpleGrid [--cols:3]">
  <div class="w-[5rem]">...</div>
  <div class="w-[10rem]">...</div>
  <div class="w-[5rem]">...</div>
</div>

Controlled Responsive Behaviour

GridRepeatAuto items will maintain their width whenever possible so your content is controlled and doesn’t get too big.

They only shrink when there’s insufficient space, which is what you’ll want anyway.

<div class="GridRepeatAuto md:[--cols:2] lg:[--cols:3]">
  <div class="w-[6rem]">...</div>
  <div class="w-[6rem]">...</div>
  <div class="w-[6rem]">...</div>
</div>

Resize to see this work!

No minmax nonsense

GridRepeatAuto is also wrapped with minmax so you never have to worry about overflowing grid items.

Resize to see this work!

Basic Usage

GridRepeatAuto lets you create controlled layouts by specifying the width of each element.

The easiest way is to use Tailwind for this. You can also use CSS but it’s a bit more verbose (worse if tried to do this in CSS for Astro).

<div class="GridRepeatAuto [--cols:2]">
  <div class="w-[30rem]">...</div>
  <div class="w-[15rem]">...</div>
</div>

.YourGrid {
  --cols: 2;
  > *:nth-child(1) { width: 30rem; }
  > *:nth-child(2) { width: 15rem; }
}

.YourGrid {
  --cols: 2;
  > *:nth-child(1),
  > *:where(astro-slot, astro-island):nth-child(1) > * {
    width: 30rem;
  }

  > *:nth-child(2),
  > *:where(astro-slot, astro-island):nth-child(1) > * {
    width: 15rem;
  }
}

Changing the gap between grid items

You can change the gap between grid items with the gap property or the --gap variable.

<div class="GridRepeatAuto [--cols:2] gap-8">
  <div class="w-[30rem]">...</div>
  <div class="w-[15rem]">...</div>
</div>

Responsive Behaviour

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

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

Full-width on Mobile

If you want grid items to be full-width on mobile, you can add a responsive variant with your width classes. This ensures that the default width: 100% will be applied on mobile.

<div class="GridRepeatAuto md:[--cols:2]">
  <div class="md:w-[30rem]">...</div>
  <div class="md:w-[15rem]">...</div>
</div>

Note

When you resize the preview above, notice the following:

Larger grid items will shrink more than smaller items
This continues until all items are the same size
Then they shrink evenly.

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.

Usage in Flexbox

If GridRepeatAuto grid items don’t have an explicit width, they will collopse when placed in Flexbox conatiner.

<div class="flex">
    <div class="GridRepeatAuto md:[--cols:2]">
      <div class="md:w-[30rem]">...</div>
    <div class="md:w-[15rem]">...</div>
  </div>
</div>

Workarounds

There are a couple of workarounds you can use:

Ensure grid items have sufficient content within them (recommended).
Put GridRepeatAuto in block containers
Explicitly set GridRepeatAutos width on mobile

Ensure grid items have sufficient content

If you have sufficient content in your grid items, the problem will go away by itself as if it wasn’t even there.

This is the simplest (and usually the correct) solution since you need content inside your grids anyway.

<div class="flex">
  <div class="GridRepeatAuto md:[--cols:2]">
    <div class="md:w-[30rem]"> Add some content </div>
    <div class="md:w-[15rem]"> Add some content </div>
  </div>
</div>

Put Grid Repeat Auto in block containers

Another way is to put a <div> without classes as the parent element. This changes the context back to block so GridRepeatAuto won’t get affected by the Flexbox issue.

<div>
  <div class="GridRepeatAuto md:[--cols:2]">
    <div class="md:w-[30rem]">...</div>
    <div class="md:w-[15rem]">...</div>
  </div>
</div>

Explicitly set a width on mobile

This is the least recommended solution because it requires the most intervention.

To use this solution, you set width on mobile and reset that width back to auto on larger screens.

<div class="flex">
  <div class="GridRepeatAuto w-full md:w-auto md:[--cols:2]">
    <div class="md:w-[30rem]">...</div>
    <div class="md:w-[15rem]">...</div>
  </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 GridRepeatAuto.

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

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

  > *,
  > *:where(astro-island, astro-slot) > * {
    max-width: 100%;
    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.

Grid Repeat Auto

CSS Variables

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

Children Properties

Properties

Property	Default	Description
`width`	`auto`	Maximum width of the grid item

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.