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 { sm: number, md: number, lg: number } is provided, the number of columns adjusts automatically based on screen width.
sm:< 640pxmd:>= 640px < 960pxlg:>= 960px
16
Gap between columns.
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:
