Card Grids
Use the doc-grid shortcode to display multiple cards in a responsive grid layout.
Basic Grid
By default, grids display cards in 2 columns on larger screens:
Stars
Sirius, Vega, Betelgeuse
Moons
Io, Europa, Ganymede
MARKDOWN
[doc-grid]
[doc-card title="Stars" icon="tabler/star.svg"]
Sirius, Vega, Betelgeuse
[/doc-card]
[doc-card title="Moons" icon="tabler/moon.svg"]
Io, Europa, Ganymede
[/doc-card]
[/doc-grid]
Link Cards in Grid
Combine link cards with grids for navigation sections:
Installation
Get started with installing and setting up your project.
Configuration
Learn about all the configuration options available.
Quick Start
Jump right in with our quick start guide.
Theming
Customize the look and feel of your documentation.
Custom Column Count
Control the number of columns with the columns parameter (1-4):
Single Column
Full Width Card
This card spans the entire width of the content area.
MARKDOWN
[doc-grid columns=1]
[doc-card title="Full Width Card"]
This card spans the entire width.
[/doc-card]
[/doc-grid]
Three Columns
First
Column one
Second
Column two
Third
Column three
MARKDOWN
[doc-grid columns=3]
[doc-card title="First"]Column one[/doc-card]
[doc-card title="Second"]Column two[/doc-card]
[doc-card title="Third"]Column three[/doc-card]
[/doc-grid]
Four Columns
One
Two
Three
Four
Parameters
| Parameter | Required | Default | Description |
|---|---|---|---|
columns |
No | 2 |
Number of columns (1-4). Responsive on smaller screens. |
Responsive Behavior
Grids automatically adjust for different screen sizes:
- Mobile: Always single column
- Tablet: 2 columns (for 2+ column grids)
- Desktop: Full column count