layouts

Masonry

Arrange elements inside a grid with dynamic offsets

Features

Content placement made easy
Flex based
Responsive
Works with dynamic content

Links

Open in playground Open in Storybook View source

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati aut deleniti, odit beatae vo

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati aut deleniti, odit beatae vo

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Anatomy

import { Masonry } from "@wonderflow/react-components";

export default () => {
  return (
    <Masonry columns={{
      default: 4,
      small: 1,
    }}>
      ...
    </Masonry>
  );
};

tsx

API Reference

PROPERTY

TYPE

DEFAULT

gutter

enum

0

columns

number|object

3