Card Grids

To wrap multiple <Card> or <LinkCard> components in a grid, use the<CardGrid> component.

Import

import { CardGrid } from '@astrojs/starlight/components';

Usage

Group cards

Display multiple <Card> components side-by-side when there’s enough space by grouping them using the <CardGrid> component.

Group link cards

Display multiple <LinkCard> components side-by-side when there’s enough space by grouping them using the <CardGrid> component.

Stagger cards

Shift the second column of the grid vertically to add visual interest by adding the stagger attribute to the <CardGrid> component.

This attribute is useful on your home page to display your project’s key features.

<CardGrid> Props

Implementation: CardGrid.astro

The <CardGrid> component accepts the following props:

stagger

type: boolean

Defines whether to stagger the cards in the grid or not.