Fylgja Product Grid

A product grid arranges cards into a responsive listing. The auto-grid utility flows the cards into as many columns as fit, with no media queries, and each product is a list item so the grid stays a real <ul>.

Preview

  • A cat lounging in the sun

    Sunny Cat Wallpaper

    €18.99

  • An orange fox in the grass

    Orange Fox Wallpaper

    €6.00

  • A dog keeping watch

    Watchful Dog Wallpaper

    €112.56

<ul role="list" class="auto-grid gap" style="--max-col-size: 14rem">
	<li class="card --hover">
		<img
			src="/images/placeholders/cat.webp"
			alt="A cat lounging in the sun"
			width="500"
			height="300"
			loading="lazy"
			class="rounded"
		/>
		<p class="lead"><strong>Sunny Cat Wallpaper</strong></p>
		<p class="font-bold">€18.99</p>
		<form action="#" class="flex-wrap gap">
			<input type="hidden" name="product-id" value="cat-01" />
			<button class="flex-auto">Add to cart</button>
		</form>
	</li>
	<li class="card --hover">
		<img
			src="/images/placeholders/fox.webp"
			alt="An orange fox in the grass"
			width="500"
			height="300"
			loading="lazy"
			class="rounded"
		/>
		<p class="lead"><strong>Orange Fox Wallpaper</strong></p>
		<p class="font-bold">€6.00</p>
		<form action="#" class="flex-wrap gap">
			<input type="hidden" name="product-id" value="fox-01" />
			<button class="flex-auto">Add to cart</button>
		</form>
	</li>
	<li class="card --hover">
		<img
			src="/images/placeholders/dog.webp"
			alt="A dog keeping watch"
			width="500"
			height="300"
			loading="lazy"
			class="rounded"
		/>
		<p class="lead"><strong>Watchful Dog Wallpaper</strong></p>
		<p class="font-bold">€112.56</p>
		<form action="#" class="flex-wrap gap">
			<input type="hidden" name="product-id" value="dog-01" />
			<button class="flex-auto">Add to cart</button>
		</form>
	</li>
</ul>

Usage

  • Wrap the products in a <ul role="list" class="auto-grid gap"> and set the minimum card width with --max-col-size (for example 14rem).
  • Each product is a <li class="card --hover">; --hover gives feedback on pointer devices and needs the --shadow-4 token.
  • Put the buy action in a <form> so it works without JavaScript.

Accessibility

  • Keep the list semantics: a <ul> of <li> products, with role="list" so the list role survives the list-style: none reset.
  • Give each product image a descriptive alt and a real heading.

FAQ

How does the grid reflow without media queries?

auto-grid uses CSS repeat(auto-fill, ...), so the number of columns follows the container width. Set the minimum card width with the --max-col-size variable.