CardGrid
Arrange related cards in a responsive grid.
On this page
Write
Create content.
Publish
Build the site.
View code
import Card from "@chitrank2050/monoline-docs/components/Card.astro";
import CardGrid from "@chitrank2050/monoline-docs/components/CardGrid.astro";
<CardGrid>
<Card title="Write" description="Create content." />
<Card title="Publish" description="Build the site." />
</CardGrid>Usage
Compose Card or LinkCard children in the default slot. Keep descriptions similar in length.
Three columns
Write
Review
Publish
View code
import Card from "@chitrank2050/monoline-docs/components/Card.astro";
import CardGrid from "@chitrank2050/monoline-docs/components/CardGrid.astro";
<CardGrid columns={3}>
<Card title="Write" />
<Card title="Review" />
<Card title="Publish" />
</CardGrid>API reference
| Name | Type | Default | Description |
|---|---|---|---|
columns | 1 | 2 | 3 | 2 | Preferred desktop column count; narrow layouts adapt. |
Behavior and accessibility
Use grids to organize related documentation topics. Columns collapse on smaller screens; keep card descriptions concise.