Define your grid visually
Create whatever structure your project needs by defining your rows, columns, and gaps visually.
- Click to add rows and columns
- Drag to resize cells and gaps
- Define grid template areas to reuse layouts
Build your layout right on the canvas
Bring your designs to life by dragging elements across rows and columns right on the canvas.
- Drag elements to span rows and columns
- Use autoflow to have elements move to next available cells
- Use manual to fix elements in a certain spot
Reflow your layout for every device
Translate your designs for all devices in a few clicks. Grid designs naturally flow and resize as needed, so your designs work with hardly any CSS changes across breakpoints.
- Rows and columns generate automatically to hold content
- Build one layout that works across all breakpoints
- Make tweaks as needed for easy breakpoint customization
Publish in a click — or export the code
Take your design live in a click to test in the browser, or export the code for use in whatever project you’re working on.
Learn grid in 30 minutes
Video course
Building grid layouts in Webflow
Head to Webflow University for a look at how to build grid powered layouts in Webflow.
View course
Examples
Grab a cloneable template to see popular and common grid-powered layouts.
All features
Discover everything you can do with Webflow.
Elevate your site with the power of AI
Build
Manage
Optimize
Extend
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
Get started
Transforming the design process at
.svg)
.svg)
