Intermediate
How to build complex grid layouts on Webflow
Quick Answer
Build complex grid layouts in Webflow by adding a div block, setting display to Grid, defining columns and rows in the Grid settings panel, then positioning child elements using grid properties. Use different grid configurations across breakpoints for responsive layouts.
Prerequisites
- Basic understanding of Webflow Designer
- Familiarity with CSS Grid concepts
- Knowledge of responsive design principles
- Experience with div blocks and containers
1
Create the Grid Container
Add a Div Block from the Elements Panel to your canvas. Select the div and navigate to the Style Panel. In the Layout section, set Display to
Grid. Your container will now show grid lines and become a grid container ready for complex layouts.Tip
Give your grid container a descriptive class name like 'main-grid' or 'product-grid' for better organization.
2
Define Grid Structure
With your grid container selected, locate the Grid section in the Style Panel. Click Edit Grid to open the grid editor. Define your columns by clicking the + button and setting values like
1fr, 200px, or minmax(200px, 1fr). Add rows similarly using the row controls. You can mix units like repeat(3, 1fr) for equal columns or 200px 1fr 100px for specific sizing.Tip
Use 'fr' units for flexible columns that adapt to available space, and fixed units like 'px' for consistent sizing.
3
Set Grid Gaps and Alignment
In the Grid section, adjust Grid Gap to add spacing between grid items. Set Column Gap and Row Gap independently if needed. Configure Justify Items (horizontal alignment) and Align Items (vertical alignment) to control how content sits within each grid cell. Options include
start, center, end, and stretch.Tip
Use 'stretch' alignment to make grid items fill their entire cell, perfect for card layouts.
4
Add and Position Grid Items
Add child elements (div blocks, text, images, etc.) inside your grid container. Select each child element and use the Grid Child settings in the Style Panel. Set Grid Column and Grid Row positions using values like
1 / 3 to span from line 1 to line 3, or span 2 to span 2 tracks. Use Grid Area for shorthand positioning like 1 / 1 / 3 / 4.Tip
Preview your grid lines by selecting the grid container - Webflow shows numbered grid lines to help with positioning.
5
Create Advanced Grid Patterns
Build complex layouts by combining different grid techniques. Use Grid Template Areas for semantic layouts by defining named areas like
'header header' 'sidebar content' 'footer footer'. Create asymmetric grids with varying column/row sizes. Implement masonry-style layouts using Grid Auto Flow set to row dense and Grid Auto Rows with minmax(auto, max-content).Tip
Grid template areas make it easier to visualize and maintain complex layouts, especially for team collaboration.
6
Make Grid Responsive
Select different breakpoints using the Breakpoint Menu at the top of the Designer. Modify your grid structure for each breakpoint by changing column/row definitions, gaps, and item positions. For mobile, consider switching to a single column layout using
1fr. Use Grid Auto Flow set to row for stacked layouts on smaller screens.Tip
Start with desktop layout, then work down to smaller breakpoints, simplifying the grid structure as screen size decreases.
7
Optimize Grid Performance
In the Grid settings, use Grid Auto Rows and Grid Auto Columns to handle dynamically added content from CMS collections. Set these to values like
minmax(200px, auto) for consistent sizing. Enable Subgrid for nested grid items when you need child grids to align with the parent grid structure.Tip
Test your grid with varying content lengths to ensure it maintains structure with dynamic content.
8
Test and Refine Layout
Use Preview Mode or publish to staging to test your grid across different devices and content scenarios. Check grid behavior with longer text content, missing images, or varying item counts. Fine-tune Grid Gap, alignment properties, and responsive breakpoint adjustments. Use browser developer tools to inspect the generated CSS Grid code and verify proper implementation.
Tip
Test your grid layout with real content early in the design process to catch potential issues before going live.
Troubleshooting
Grid items overlapping or positioning incorrectly
Check your Grid Column and Grid Row values in the Grid Child settings. Ensure you're not assigning multiple items to the same grid area unless intentional. Verify grid line numbers match your intended layout and use
auto for automatic positioning.Grid not responding properly on mobile devices
Select the mobile breakpoint and simplify your grid structure. Change multi-column layouts to single column using
1fr in Grid Columns. Adjust or remove explicit Grid Column and Grid Row positioning on child elements to allow natural flow.Grid container not expanding to fit content
Check that your grid container has proper height settings. Remove fixed heights and use
min-height instead. Ensure Grid Auto Rows is set to auto or max-content to accommodate varying content heights.CMS collection items not displaying correctly in grid
Wrap your collection list in the grid container and ensure the Collection Item has proper Grid Child settings. Use Grid Auto Flow set to
row or column and configure Grid Auto Rows with consistent sizing like minmax(300px, auto).Ready to get started with Webflow?
Put this tutorial into practice. Visit Webflow and follow the steps above.
Visit Webflow →