Grid Gallery
grid-gallery creates a gallery with CSS Grid. You can use auto-fill or auto-fit to size the columns.
Create Galleries easily with CSS Grid
grid-gallery lets you create a Gallery with CSS grid. It uses auto-fill by default.
<div class="grid-gallery"> <div>...</div> <div>...</div> <div>...</div> <div>...</div> <div>...</div></div>Choose from auto-fill or auto-fit
grid-gallery uses auto-fill by default.
You can change between auto-fit and auto-fill by using the grid-gallery-fit or grid-gallery-fill class.
<div class="grid-gallery-fit"> <div>...</div> <div>...</div> <div>...</div></div><div class="grid-gallery-fill"> <div>...</div> <div>...</div> <div>...</div></div>Gallery with auto-fill
Gallery with auto-fit
Change the width of each column
You can size each column with --item-width.
<div class="grid-gallery [--item-width:5rem]"> <div>...</div> <div>...</div> <div>...</div> <div>...</div> <div>...</div> <div>...</div></div>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="grid-gallery [--item-width:1000px]"> <div>...</div> <div>...</div> <div>...</div></div>Basic Usage
You can create a gallery with grid-gallery. By default, grid-gallery uses auto-fill.
<div class="grid-gallery"> <div>...</div> <div>...</div> <div>...</div></div>If you wish to be explicit, you can create the grid with:
grid-gallery-fit: Usesauto-fitgrid-gallery-fill: Usesauto-fill
<div class="grid-gallery-fill"> ... </div><div class="grid-gallery-fit"> ... </div>Uses auto-fill
Uses auto-fit
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.
Changing the width of each item
You can change the width of each item with the --item-width variable.
<div class="grid-gallery-fit [--item-width:150px]"> <div>...</div> <div>...</div> <div>...</div></div>Allowing items to span multiple columns
If you wish for grid items to span multiple colums, you can use the span variable.
<div class="grid-gallery-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="grid-gallery gap-8"> <div>...</div> <div>...</div></div>Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
Basic Usage
You can create a gallery with grid-gallery. By default, grid-gallery uses auto-fill.
<div class="grid-gallery"> <div>...</div> <div>...</div> <div>...</div></div>If you wish to be explicit, you can create the grid with:
grid-gallery-fit: Usesauto-fitgrid-gallery-fill: Usesauto-fill
<div class="grid-gallery-fill"> ... </div><div class="grid-gallery-fit"> ... </div>Uses auto-fill
Uses auto-fit
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.
Changing the width of each item
You can change the width of each item with the --item-width variable.
<div class="grid-gallery-fit [--item-width:150px]"> <div>...</div> <div>...</div> <div>...</div></div>Allowing items to span multiple columns
If you wish for grid items to span multiple colums, you can use the span variable.
<div class="grid-gallery-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="grid-gallery gap-8"> <div>...</div> <div>...</div></div>The astro-island and astro-slot selectors help to alleviate styling frustrations when using Astro.
.grid-gallery,.grid-gallery-fit { display: grid; grid-template-columns: repeat( auto-fit, minmax(min(var(--item-width, 3rem), 100%), 1fr) ); gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap)); max-width: 100%;
> *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * { grid-column: var(--colstart) / span var(--span); grid-row: var(--rowstart) / span var(--rowspan); max-width: 100%; }}
.grid-gallery-fill { display: grid; grid-template-columns: repeat( auto-fill, minmax(min(var(--item-width, 3rem), 100%), 1fr) ); gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap)); max-width: 100%;
> *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * { grid-column: var(--colstart) / span var(--span); grid-row: var(--rowstart) / span var(--rowspan); max-width: 100%; }}Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
The astro-island and astro-slot selectors help to alleviate styling frustrations when using Astro.
.grid-gallery,.grid-gallery-fit { display: grid; grid-template-columns: repeat( auto-fit, minmax(min(var(--item-width, 3rem), 100%), 1fr) ); gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap)); max-width: 100%;
> *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * { grid-column: var(--colstart) / span var(--span); grid-row: var(--rowstart) / span var(--rowspan); max-width: 100%; }}
.grid-gallery-fill { display: grid; grid-template-columns: repeat( auto-fill, minmax(min(var(--item-width, 3rem), 100%), 1fr) ); gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap)); max-width: 100%;
> *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * { grid-column: var(--colstart) / span var(--span); grid-row: var(--rowstart) / span var(--rowspan); max-width: 100%; }}Grid Gallery
Class Modifiers
| Class | Description |
|---|---|
grid-gallery-fit | Uses auto-fit |
grid-gallery-fill | Uses auto-fill |
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-x | - | Gap between columns |
--gap-y | - | Gap between rows |
--gap | 1rlh | Gap between columms and rows. --gap-x and --gap-y will override this value. |
Children CSS Variables
| CSS Variable | Default | Description |
|---|---|---|
--span | 1 | Number of columns to span |
Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
Grid Gallery
Class Modifiers
| Class | Description |
|---|---|
grid-gallery-fit | Uses auto-fit |
grid-gallery-fill | Uses auto-fill |
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-x | - | Gap between columns |
--gap-y | - | Gap between rows |
--gap | 1rlh | Gap between columms and rows. --gap-x and --gap-y will override this value. |
Children CSS Variables
| CSS Variable | Default | Description |
|---|---|---|
--span | 1 | Number of columns to span |