Bedrock Layout Primitives Home
Edit page
Components
AppBoundaryCSS-ResetCenterColumnsCoverFrameGridInlineInlineClusterMasonryGridUse caseHow to installBasic usagedata-attributeStorybookPropertiesPadBoxReelSpacing ConstantsSplitStackSwitcheruseContainerQueryuseForwardedRefuseMatchContainerSizesuseMatchMediauseMediaQueryuseStatefulRef
HomeInspirationLayout PrimitivesRegarding IE11Why Styled Components?

MasonryGrid

Use case

The MasonryGrid component is designed to create a masonry grid layout of items that will automatically wrap based on the minItemWidth

How to install

If you haven't already, install styled-components:

npm install styled-components

Then install the MasonryGrid component

npm install @bedrock-layout/masonry-grid

Basic usage

data-attribute

For purposes of styling you can select data-bedrock-layout-masonry-grid.

Storybook

Checkout storybook for more details.

Properties

PropertyDescriptionTypeDefault
guttersets space inbetween each elementone of spacingslg
minItemWidthmin width in px of each grid itemnumber or valid CSS length as a stringbreakPoints.smallOnly
  • The spacing and breakPoints can be found at spacing-constants