Masonry Card
Overview
The Masonry Card is a versatile container component that automatically calculates the height of each item and arranges them in a masonry layout. Any content can be placed within <CardMasonry>.
What is an item?
An item represents individual content such as an image, text, video, etc.
- In Markdown syntax, any content occupying its own line (with blank lines before and after) is considered an item.
- In HTML structure, each direct child element of the container is considered an item.
<CardMasonry>
<img src="..." alt="...">
<!-- More content -->
</CardMasonry>Props
Number of columns.
The component automatically adjusts the number of columns based on screen width by default. Three columns are displayed when space permits, while two columns are shown on smaller screens.
The cols prop configures the number of columns. When a number is provided, all screen sizes display number columns. When an object is provided, the number of columns adjusts automatically based on screen width (all three keys are optional; when omitted they fall back to lg → 3, md → 2 and sm → 2).
sm:< 640pxmd:>= 640px < 960pxlg:>= 960px
Gap between columns.
Slots
default
The masonry grid receives its child cards through the default slot. Unlike CardGrid, it automatically distributes children into columns by height for you.
<CardMasonry :cols="3">
<ImageCard v-for="item in photos" :key="item.src" v-bind="item" />
</CardMasonry>Children are redistributed into columns
The component uses a height-greedy column assignment strategy: it measures each child's height in turn and places it into the column with the smallest accumulated height.
As a result, the order of children does not match the visual reading order (the 1st, 2nd and 3rd items may not land in columns 1, 2 and 3 respectively).
If strict reading order matters, use CardGrid, which preserves DOM order.
Client-only rendering
Masonry must measure element heights to compute columns, so it is wrapped in ClientOnly and renders nothing during SSR. This affects the first-screen HTML of that region — avoid placing critical content only inside it.
Markdown Syntax Support
In Markdown, the ::: card-masonry container can be used instead of <CardMasonry>.
::: card-masonry cols="3" gap="16"
<!-- More content -->
::: Examples
Image Masonry
Masonry layout is particularly suitable for displaying images. You can directly place  within ::: card-masonry.
Input:
::: card-masonry
:::Output:
Card Masonry
Masonry layout is also suitable for displaying cards. You can place ::: card containers within ::: card-masonry.
Input:
:::: card-masonry
::: card title="Card 1"
Card content
:::
::: card title="Card 2"
Card content
Additional card content
:::
::: card title="Card 3"
Card content
:::
::: card title="Card 4"
Card content
:::
::: card title="Card 5"
Card content
Additional card content
:::
::: card title="Card 6"
Card content
:::
::::Output:
Code Block Masonry
Input:
:::card-masonry
```ts
const a = 1
```
```json
{
"name": "John"
}
```
```css
p {
color: red;
}
```
```html
<html>
<body>
<h1>Hello world</h1>
</body>
</html>
```
```ts
const a = 12
const b = 1
```
```rust
fn main() {
println!("Hello, world!");
}
```
:::Output:
