Masonry

Grid layout with optimized available space for varying heights and widths

Use the Masonry component to display content, like images or cards, in an organized, visually appealing manner. Unlike traditional grid layouts with fixed rows and columns, masonry layouts position elements in a way that optimizes available space, allowing for varying heights and widths of content blocks.

---
import { Masonry } from 'webcoreui/astro'
import { Box } from '@components' // Your custom component

const masonry = [
    { component: Box, props: { height: 100 }, children: 1 },
    { component: Box, props: { height: 50 }, children: 2 },
    { component: Box, props: { height: 70 }, children: 3 },
    { component: Box, props: { height: 90 }, children: 4 },
    { component: Box, props: { height: 140 }, children: 5 },
    { component: Box, props: { height: 120 }, children: 6 }
]
---

<Masonry items={masonry} />

<script>
    import { Masonry } from 'webcoreui/svelte'
    import { Box } from '@components' // Your custom component

    const masonry = [
        { component: Box, props: { height: 100 }, children: 1 },
        { component: Box, props: { height: 50 }, children: 2 },
        { component: Box, props: { height: 70 }, children: 3 },
        { component: Box, props: { height: 90 }, children: 4 },
        { component: Box, props: { height: 140 }, children: 5 },
        { component: Box, props: { height: 120 }, children: 6 }
    ]
</script>

<Masonry items={masonry} />

import React from 'react'
import { Masonry } from 'webcoreui/react'
import { Box } from '@components' // Your custom component

const masonry = [
    { component: Box, props: { height: 100 }, children: 1 },
    { component: Box, props: { height: 50 }, children: 2 },
    { component: Box, props: { height: 70 }, children: 3 },
    { component: Box, props: { height: 90 }, children: 4 },
    { component: Box, props: { height: 140 }, children: 5 },
    { component: Box, props: { height: 120 }, children: 6 }
]

const Component = () => (
    <Masonry items={masonry} />
)

export default Component

The Masonry component expects an items prop referencing an array of object. Each object in the array can have the following properties:

• component: Sets the item to a component.
• props: Sets the props on the component.
• children: Sets the children of the component.
• html: Sets the item to a HTML string.

The children property can be a number, a string, or reference another component object in the form of:

const children = {
    component: Box,
    props: { ... },
    children: 1
}

Child components cannot contain other child components. If you need further nesting, create a new component for the nested part and pass it to the top-level component property of your item.

Columns

By default, the Masonry component have three columns. This can be configured using the columns property:

<Masonry items={[...]} columns={2} />
<Masonry items={[...]} /> <!-- No need to specify columns for a 3-column layout -->
<Masonry items={[...]} columns={4} />

Custom Gaps and Element

The Masonry component is rendered into a section element. This can be customized along with the gap size using the element and gap props:

<Masonry
    items={[...]}
    element="article"
    gap="10px"
/>

<Masonry
    items={[...]}
    element="div"
    gap="0"
/>

If you need to globally specify gaps for your Masonry component, the preferred way is to override the following CSS variable:

html body {
    --w-masonry-gap: 10px;
}

This way, you won’t need to specify the gap prop on each individual Masonry component.

Sequential Order

The items of the masonry component are ordered from left to right, top to bottom. This ordering can be changed with the sequential prop. Set sequential to true to order the items in sequential order, arranging them from top to bottom first:

<Masonry items={[...]} sequential={true} />

API

type MasonryProps = {
    items: {
        component?: AstroComponent | SvelteComponent | ReactComponent
        props?: {
            [key: string]: any
        }
        children?: {
            component: AstroComponent | SvelteComponent | ReactComponent
            props?: {
                [key: string]: any
            }
            children?: string | number
        } | string | number
        html?: string
    }[]
    element?: string
    gap?: string
    columns?: number
    sequential?: boolean
    className?: string
}