MasonryGrid Component

Usage

Make sure to wrap grid items with an empty div. This is necessary to calculate the correct item sizes.

<template>
    <MasonryGrid :watch="items">
        <div v-for="item in items">
            <div :style="{ height: item.height + 'px', backgroundColor: item.color }">Example Item</div>
        </div>
    </MasonryGrid>
</template>

<script setup>
import { MasonryGrid } from 'wly-statamic-theme-extensions';
import { ref } from 'vue';

const items = ref([
    {
        height: 300,
        color: '#fa9',
    },
    {
        height: 500,
        color: '#cf7d6c',
    },
    {
        height: 200,
        color: '#ffdf99',
    },

    {
        height: 500,
        color: '#fffa99',
    },
    {
        height: 350,
        color: '#d19790',
    },
]);
</script>

Example