The power of CSS grid — in a completely visual canvas

Build smart, responsive, CSS grid-powered layouts in Webflow visually.

Shoot, something didn't work. Try again later, bud.
Learn grid

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

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.