Masonry

React Bootstrap 5 Masonry component

Responsive masonry built with React Bootstrap 5. Masonry is a grid layout based on columns & it optimizes the use of space inside the web page by reducing any unnecessary gaps.

To learn more read Docs.

Basic layout

Show code

Horizontal option

Show code

This is a mobile version of the documentation.

View this website on the desktop to copy & edit the source code of the component.

Flexbox option

Show code

This is a mobile version of the documentation.

View this website on the desktop to copy & edit the source code of the component.

Images option

Show code

This is a mobile version of the documentation.

View this website on the desktop to copy & edit the source code of the component.

---

Related resources

Grid system Flexbox Horizontal alignment