Define your grid 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
- 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
- Rows and columns generate automatically to hold content
- Build one layout that works across all breakpoints
- Make tweaks as needed for easy breakpoint customization
Learn grid in 30 minutes
Building grid layouts in Webflow
Head to Webflow University for a look at how to build grid powered layouts in Webflow.
Grab a cloneable template to see popular and common grid-powered layouts.
Create fully localized experiences for site visitors around the world.
Define your own content structure, and design with real data.
Goodbye templates and code — design your store visually.
Build gated content experiences for your audience.
Edit and update site content right on the page.
Create custom automated workflows and connect to third-party apps.
Optimize your website with controls, hosting, and flexible tools.
Set up lightning-fast managed hosting in just a few clicks.
Build smart, responsive, CSS grid-powered layouts in Webflow visually.
Create production-ready React components visually in Webflow.
Figma to Webflow
Turn your static designs into clean, production-ready code.
Build websites interactions and animations visually.