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
Head to Webflow University for a look at how to build grid powered layouts in Webflow.
Building grid layouts in Webflow
Grab a cloneable template to see popular and common grid-powered layouts.