How to build complex grid layouts on Webflow

intermediate 12 min read Updated 2026-03-18

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.

Try Webflow Full Webflow Review

Prerequisites

Basic understanding of Webflow Designer
Familiarity with CSS Grid concepts
Knowledge of responsive design principles
Experience with div blocks and containers

Step-by-Step Instructions

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.

Give your grid container a descriptive class name like 'main-grid' or 'product-grid' for better organization.

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.

Use 'fr' units for flexible columns that adapt to available space, and fixed units like 'px' for consistent sizing.

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.

Use 'stretch' alignment to make grid items fill their entire cell, perfect for card layouts.

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.

Preview your grid lines by selecting the grid container - Webflow shows numbered grid lines to help with positioning.

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).

Grid template areas make it easier to visualize and maintain complex layouts, especially for team collaboration.

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.

Start with desktop layout, then work down to smaller breakpoints, simplifying the grid structure as screen size decreases.

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.

Test your grid with varying content lengths to ensure it maintains structure with dynamic content.

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.

Test your grid layout with real content early in the design process to catch potential issues before going live.

Common Issues & 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).

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Webflow website before purchasing.

Visit Webflow View Webflow Pricing