# Masonry layout¶

Masonry layouts are those that display staggered grids where cells may be of variable heights. This component is a wrapper around the similar components so that all the children are positioned in a way that the columns have the minimum difference between their bottom ends.

## Props¶

1. children

Type
[
<ReactNode
...
image={Boolean}
/>
]

Default

*required

Usage

This prop differs from standard usage. See below.

Description
the list of elements that is to be shown in a masonry layout
2. columns

Type

number

Default

2

Description
number of columns into which the list of elements is to be divided
3. gap

Type

number

Default

10

Description
gutter in between the columns of the layout

## Example usage¶

import { MasonryLayout } from 'formula_one'


Importing MasonryLayout from formula_one

<MasonryLayout columns={isBrowser ? 2 : 1} gap={28}>
{feedList.map(feed => {
return (
<FeedCard
key={feed.id}
feed={feed}
image={Boolean(feed.image)}
/>
)
})}
</MasonryLayout>


Using MasonryLayout, by passing number of columns and gap between them

Note

children is a special prop that must be passed as actual children in the React shadow DOM. Notice here that children actually refers to the map on feedList returning a list of FeedCard nodes.