Usage
---
import Card from "@components/Card.astro";
---
<div class="l-grid" style="--gr-min-width: calc((50rem / 2) - (var(--s0) * 1));">
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
</div>
//https://every-layout.dev/layouts/grid/
.l-grid {
--gr-gap: var(--s0);
display: grid;
gap: var(--gr-row-gap, var(--gr-gap, var(--vertical-rhythm)))
var(--gr-column-gap, var(--gr-gap, var(--gutter)));
grid-template-columns: repeat(
var(--gr-repeat, auto-fit),
minmax(min(var(--gr-min-width, 35ch), 100%), 1fr)
);
}
Todo:
Refresh yourself on how to use: https://gridbyexample.com/resources/
Use this layout pattern to create a grid of equally sized elements. Particulary useful for collections such as posts.
Minimum Width of Grid Items
The parent container width and gap size will determine the number of items that can fit in a grid.
You can use the following formula to calculate the minimum width of a grid item:
/** * ( [container width] / [grid item count]) - ([gap] * [grid item count - 1] ) *//* 3-column grid example */.component { --min-width: calc((var(--bp-48) / 3) - (var(--s0) * 2));}
Repeat
Use the --gr-repeat
custom property to specify the number of items the grid can fit in a single row. If unset, a fallback value of auto-fit
will used. In most cases, auto-fit
is the desired value to ensure responsiveness.