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.