Gallery Grid

GalleryGrid creates a gallery with CSS Grid. You can use auto-fill or auto-fit to size the columns.

Create Galleries easily with CSS Grid

GalleryGrid lets you create a Gallery with CSS grid. It uses auto-fill by default.

<div class="GalleryGrid">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Resize to see this work!

Choose from auto-fill or auto-fit

You can change to auto-fit easily by using the Gallery-fit class. This makes each column expand to fill the available space.

<div class="GalleryGrid-fit">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Resize to see this work!

Change the width of each column

You can size each column with --item-width.

<div class="GalleryGrid [--item-width:5rem]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Resize to see this work!

Never worry about grid items exceeding their container

All grid items have a max-width of 100%, so you can set --item-width to your heart’s content without worrying about it being too large.

<div class="GalleryGrid [--item-width:200px]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Resize to see this work!

Basic Usage

You can create a Gallery that uses auto-fill with GalleryGrid.

<div class="GalleryGrid">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

If you wish to be more explicit, you can create the same grid with GalleryGrid-fll.

<div class="GalleryGrid-fill">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Fit

If you want your columns to expand and fit the available space, you can use GalleryGrid-fit.

<div class="GalleryGrid-fit">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Item width

You can change the width of each Gallery column with the --item-width variable. All grid items already have a max-width of 100% so you never have to worry the size of grid items exceeding the size of the container

<div class="GalleryGrid-fit [--item-width:150px]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Spanning multiple items

If you wish for grid items to span multiple colums, you can use the span variable.

<div class="GalleryGrid-fit">
  <div>...</div>
  <div class="[--span:2]">...</div>
  <div class="[--span:3]">...</div>
</div>

Gap between grid items

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

<div class="GalleryGrid gap-8">
  <div>...</div>
  <div>...</div>
</div>

<div class="GalleryGrid" style="--gap:2rem">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <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 GalleryGrid.

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

[class*='GalleryGrid'] {
  display: grid;
  grid-template-columns: repeat(
    var(--fit, auto-fill),
    minmax(min(var(--item-width, 3rem), 100%), 1fr)
  );
  gap: var(--gap, 1rem);

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

// Stretches items to fit the width
.GalleryGrid-fit {
  --fit: auto-fit;
}

// For easier recognition
// Creates new boxes
.GalleryGrid-Fill {
  --fit: auto-fill;
}

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.

GalleryGrid

CSS Variables

CSS Variable	Default	Description
`--item-width`	`3rem`	Size of each column
`--fit`	`auto-fill`	Size colums with `auto-fit` or `auto-fill`
`--gap`	`1rem`	Gap between columns

Note

Here’s the difference between auto-fill and auto-fit:

auto-fill: Fills the row with as many columns as possible by creating new columns.
auto-fit: Fits the currently available columns into the given space by stretching each column.

Modifiers

Class	Description
`GalleryGrid-fit`	Uses `auto-fit`
`GalleryGrid-fill`	Uses `auto-fill`

GalleryGrid Children

CSS Variables

CSS Variable	Default	Description
`--span`	`1`	Number of columns to span

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.