Usage

HTML

---
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>

SCSS

//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.