Card Grid

Responsive card layouts using layout-grid and layout-card. Automatically adapts to screen width without media queries.

Overview

This pattern creates a responsive grid of cards that automatically adjusts column count based on available space. It combines <layout-grid> for the responsive container with <layout-card> for consistent card structure.

Key features:

Auto-fit columns based on minimum width
No media queries required
Multiple card variants (default, outlined, elevated, ghost)
Built-in spacing with data-layout-gap
Semantic structure with <layout-stack> inside cards

Live Example

A grid of cards with different variants and content structures. Resize your browser to see the responsive behavior.

Source Code

The complete snippet with all card variants. Copy and customize for your content.

<section>
  <header>
    <h2>Featured Items</h2>
    <p>Browse our collection of featured content.</p>
  </header>

<layout-grid data-layout-gap="l" data-layout-min="280px">

<layout-card>
      <img
        src="/images/placeholder.jpg"
        alt="Descriptive alt text"
        width="400"
        height="225"
        loading="lazy"
      >
      <layout-stack data-layout-gap="s">
        <h3><a href="/item/1/">Card Title</a></h3>
        <p>Brief description of the card content.</p>
        <layout-cluster data-layout-gap="xs">
          <layout-badge>Category</layout-badge>
          <time datetime="2024-01-15">Jan 15</time>
        </layout-cluster>
      </layout-stack>
    </layout-card>

<layout-card data-variant="outlined">
      <layout-stack data-layout-gap="s">
        <h3><a href="/item/2/">Another Card</a></h3>
        <p>Uses the outlined variant for visual distinction.</p>
        <layout-cluster data-layout-gap="xs">
          <layout-badge data-color="success">New</layout-badge>
        </layout-cluster>
      </layout-stack>
    </layout-card>

<layout-card>
      <img src="/images/placeholder.jpg" alt="..." loading="lazy">
      <layout-stack data-layout-gap="s">
        <h3><a href="/item/3/">Card with Actions</a></h3>
        <p>This card includes action buttons.</p>
      </layout-stack>
      <footer data-layout="cluster" data-layout-gap="s">
          <button class="small">Learn More</button>
          <button class="small ghost">Share</button>
      </footer>
    </layout-card>

<layout-card>
      <a href="/item/4/" class="card-link">
        <layout-stack data-layout-gap="s">
          <h3>Interactive Card</h3>
          <p>The entire card is clickable.</p>
          <layout-badge data-color="info">Featured</layout-badge>
        </layout-stack>
      </a>
    </layout-card>

</layout-grid>
</section>

Grid Configuration

The <layout-grid> element accepts these data attributes:

Attribute	Values	Description
`data-layout-min`	CSS length (e.g. `250px`, `20ch`)	Minimum column width. Columns auto-fit based on this value.
`data-layout-gap`	`xs` `s` `m` `l` `xl`	Gap between grid items using size tokens.

Card Variants

Default Card

Standard card with subtle background and border.

Outlined Card

Transparent background with visible border. Good for text-only cards.

Clickable Card

Make the entire card clickable by wrapping its content in an anchor with class="card-link". No special attribute needed — the .card-link pattern handles the clickable area.

Usage Notes

Images: Always include width, height, and loading="lazy" attributes for performance
Accessibility: Use descriptive alt text for images; decorative images should have alt=""
Links: Place the primary link on the heading. For fully clickable cards, wrap content in an anchor with class="card-link"
Structure: Use <layout-stack> inside cards for consistent vertical spacing
Metadata: Use <layout-cluster> for horizontal badge/date groupings

Welcome to Vanilla Breeze