Grid

The power of CSS grid — in a completely visual canvas.

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

Webflow grid UI panel

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.

Localization

Create fully localized experiences for site visitors around the world.

Discover feature

CMS

Define your own content structure, and design with real data.

Discover feature

Page building

new

Launch simple landing pages quickly and easily.

Discover feature

Edit mode

Custom-built environment for content teammates.

Discover feature

Designer

The power of CSS, HTML, and Javascript in a visual canvas.

Discover feature

SEO

Optimize your website with controls, hosting, and flexible tools.

Discover feature

Interactions

Build websites interactions and animations visually.

Discover feature

Hosting

Set up lightning-fast managed hosting in just a few clicks.

Discover feature

Figma to Webflow

Turn your static designs into clean, production-ready code.

Discover feature

Grid

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

Discover feature

DevLink

Create production-ready React components visually in Webflow.

Discover feature

Logic

Create custom automated workflows and connect to third-party apps.

Discover feature

User Accounts

Build gated content experiences for your audience.

Discover feature

Ecommerce

Goodbye templates and code — design your store visually.

Discover feature