How can I create a full-page masonry grid portfolio with 4 columns and 3 rows using Webflow?
TL;DR
- Add a 100vh section with a 4-column, 3-row CSS Grid and gap spacing.
- Insert divs as portfolio items with background images and use custom row spans to simulate a masonry effect.
- Set each row to 1fr to fill the page and adjust columns at breakpoints for responsiveness.
To create a full-page masonry grid portfolio with 4 columns and 3 rows in Webflow, you'll need to use CSS Grid and a few custom layout settings to simulate the masonry effect.
1. Set Up the Page and Section
- Add a Section to your Webflow page and set its height to 100vh to make it full-page.
- Give it a class like “Portfolio Section” and set its display to Grid.
2. Configure the Grid
- In the Grid settings, set:
- Columns: 4
- Rows: 3
- Set row and column gaps (e.g., 20px) for spacing.
- Under Advanced settings, disable Auto-fit rows to keep 3 static rows.
3. Insert Portfolio Items
- Add a Div Block inside the grid for each portfolio item.
- Assign a class like “Portfolio Item”.
- Set a background image or embed an image inside it.
- Give it 100% width and height to fill the grid cell.
4. Simulate the Masonry Effect
Webflow does not support true masonry by default, but you can simulate it with custom row spans:
- Select individual Portfolio Items and under Grid Item Settings, set Row Span to 2 or 3 to vary their height.
- This creates a staggered, masonry-like appearance.
5. Ensure Full-Page Coverage
- With 4 columns and 3 rows, you’ll have up to 12 items visible on desktop.
- To ensure the grid fills the page height:
- Set each row in Grid Template Rows to 1fr.
- Adjust content to fit the layout without causing overflow.
6. Make It Responsive
- At tablet and mobile breakpoints, reduce the number of columns (e.g., 2 columns on tablet, 1 on mobile).
- You can do this by adjusting the grid's column count for each viewport.
Summary
Create a 4-column, 3-row CSS Grid in a 100vh section, insert portfolio items, and use row spans to emulate a masonry layout. While Webflow doesn't support automatic masonry flow, this method provides a clean, structured facsimile.
