The power of CSS grid — in a completely visual canvas

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

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

Examples

Grab a cloneable template to see popular and common grid-powered layouts.