Components
Masonry
A wall of uneven heights: items flow down each column before crossing to the next, so the order is column-first. A row-flow wall would need grid masonry, which browsers do not ship yet.
#Basic usage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script setup lang="ts">
import { Masonry } from "@bysages/vue";
// Uneven heights are the point — the wall reads column-first.
const heights = [5, 9, 4, 7, 11, 6, 9, 5, 8, 12, 6, 8, 4, 7];
</script>
<template>
<Masonry class="w-full">
<div
v-for="(height, index) in heights"
:key="index"
class="grid place-items-center border border-border bg-surface-3 text-sm text-secondary"
:style="{ blockSize: `${height}rem` }"
>
{{ index + 1 }}
</div>
</Masonry>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script setup lang="ts">
import { Masonry } from "@bysages/vue";
const heights = [5, 9, 4, 7, 11, 6, 9, 5, 8, 12, 6, 8, 4, 7];
const layouts = [2, 4];
</script>
<template>
<div class="grid w-full gap-6">
<Masonry v-for="columns in layouts" :key="columns" :columns="columns">
<div
v-for="(height, index) in heights"
:key="index"
class="grid place-items-center border border-border bg-surface-3 text-sm text-secondary"
:style="{ blockSize: `${height}rem` }"
>
{{ index + 1 }}
</div>
</Masonry>
</div>
</template>
#Props
#Masonry
| Prop | Type | Default | Description |
|---|---|---|---|
columns | Number | 3 | — |
minColumn | String | undefined | — |
gap | String | "md" | — |