Masonry Layout

Create a Masonry Layout (Pinterest Style) that’s also fully responsive!
Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

[.c-title_step]How to add Masonry Layout in Webflow?[.c-title_step]

Use Refokus Masonry to create a Masonry Layout (Pinterest Style) that’s also fully responsive!


[.c-title_step]Step #1: Copy/Paste tool URL[.c-title_step]

[.c-text_step]Paste the following script in the “Before tag" field under the "Custom Code" section in the page settings.[.c-text_step]

<script src="https://tools.refokus.io/masonry-layout/bundle.v1.0.0.js"></script>

[.c-title_step]Step #2: Set custom attributes[.c-title_step]

Everything is made using custom attributes, so when we say “Add” that means “Add a custom attribute”.

Add the following attributes to the element that contains all your items/cards.

  • Add [.c-tool_tag]r-masonry-layout="1"[.c-tool_tag]
  • Add [.c-tool_tag]r-masonry-column-min="500"[.c-tool_tag] to set the minimum column width (in pixels).
  • Add [.c-tool_tag]r-masonry-gap="10"[.c-tool_tag] to set the gap (or distance) between those items (in pixels).
Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

Hello! 👋

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.