How can I create a full-page masonry grid portfolio with 4 columns and 3 rows using Webflow?

To create a full-page masonry grid portfolio with 4 columns and 3 rows in Webflow, you'll need to use CSS Grid or Flexbox with advanced layout controls, and simulate the masonry effect with either custom height items or manual positioning.

1. Set Up a Full-Page Section

• Drag a Section into the canvas, and name it something like Portfolio Section.
• In the Style panel, set Height to 100vh (full viewport height).
• Set a background color or image as desired.

2. Add a Grid Container

• Inside the section, add a Div Block, name it Grid Wrapper.
• Set Display to Grid.
• Set Grid template columns to 4 columns.
• Set Grid template rows to auto, so rows adjust based on content.
• To simulate 3 visible rows, use Viewport Height Units + Overflow if needed (see below).
• Set Gap (usually 16px–24px) between items.

3. Enable Manual Masonry Effect

Since Webflow doesn't support CSS Masonry natively, simulate it using dynamic item height or apply custom JavaScript (if permitted):

• Ensure each Grid Item (add Div Blocks inside the Grid Wrapper) has different heights:
• Use Images of varying heights or style Text Blocks and Images with different content lengths.
• Set each grid item’s height to Auto or a specific pixel value to create staggered vertical variation.

4. Populate with Dynamic or Static Content

• For static grids:
• Add multiple Div Blocks inside the Grid Wrapper.
• Design each with a thumbnail, hover effect, and title.
• Vary the content so vertical heights differ.
• For CMS-based portfolios:
• Bind a Collection List to the Grid Wrapper.
• Enable grid layout for the Collection List.
• Style each item individually; again, use rich content to cause height variance.

5. (Optional) Use JavaScript for True Masonry

If exact masonry behavior is required, you can:

• Embed Masonry.js or Isotope via a Custom Code Embed (in page settings or inside an Embed block).
• Initialize it after Webflow’s scripts load, such as using DOMContentLoaded.
• Note: This part exceeds Webflow's native capabilities and requires custom code.

6. Final Adjustments for Full-Page Feel

• To give a 3-row appearance:
• Use taller items combined with overflow-y: scroll if content exceeds viewport height.
• Or set a row height manually (e.g., 33vh per row, total 3 rows).
• Set overflow: hidden or scroll depending on scrolling needs.

Summary

To build a 4-column by 3-row full-page masonry grid in Webflow:

• Use a CSS Grid container with 4 columns and adjust rows dynamically.
• Vary the height of items via content to simulate masonry.
• For true masonry, embed a library like Masonry.js and initialize via custom JavaScript.

Webflow can approximate masonry layouts visually using Grid and variable-height items, but dynamic reflowing requires custom code.