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.

Basing grid item min-width on a fluid container size

Instead of basing the grid item width on a fixed value, we can use clamp to allow it to scale with the viewport.

.component {
  --container-width: clamp(48rem, 83.33333333333334vw, 75rem);
  --min-width: calc((var(--container-width) / 3) - (var(--s0) * 2));
}