Grid Layout Builder by Webflow

A completely visual way to build CSS grid–powered layouts.

get it

A transformation layout system — made visual in Webflow. Experiment and build unique, responsive, production layouts using CSS Grid.

  • Vincent Bidaux
    Vincent BidauxFront-end dev, digital design, img prod

    In-viewport design module, fluent at what's Flexbox having a hard time with


    Wasn't available last year when I had to design those tabloids sites

    First serious component that you design directly inside of the viewport. Maybe a glimpse of what the future is made of.

    Yeah I ear you thinking "Well like tables in Dreamweaver..." but IT'S NOT! Contrary to Dreamweaver, with Webflow CSS grid you can design AND keep your sanity.

    Vincent Bidaux has used this product for one week.
  • Chris Cole
    Chris ColeDesigner / Futurist

    Clean UI, precise controls for aligning and stretching grid content, makes it easy to restructure content for smaller media queries


    It would be nice to have the grid auto-adapt to smaller media queries as opposed to manually setting it, but I know that that's coming soon.

    I use Webflow every day for my work and I've had the chance to beta test this new grid feature for the past two weeks. It's going to change the way I build sites. Big fan.

    Chris Cole has used this product for one week.
You need to become a Contributor to join the discussion.
brryantMaker@bryantchou · co-founder, webflow
Hey ProductHunt! Excited to share this product with you all today. First, have you heard of CSS Grid? Well, there’s a less than 1% chance you’ve even visited a website that is using it. That’s a real bummer since it’s truly transformational way to build layouts on the web. It’s more flexible than flexbox for building layouts, but writing the actual syntax for it is can be tough to pick up. We here at Webflow aim to make it easier for everyone (and I mean everyone from marketers, designers, to developers) to build on top of this revolutionary layout paradigm that is already supported on all major browsers — without needing to spend hours upon hours learning to write the code. Check out the landing page to play around with four examples to see what’s possible with Webflow grid, and head to our new course on Webflow University for a deeper dive into what this layout system unlocks. We would love to hear what you all think! The team will be here to answer any questions as well — happy designing!
Mackenzie Child 😻
Mackenzie Child 😻@mackenziechild · I design, build, and teach things.
Woah! 😵 So excited to play with this 🙌
Mat Vogels
Mat VogelsHiring@matvogels · Founder, Zestful
This is so crazy good it's a bit scary. Excited to put it to use. Congrats @webflowapp team!
brryantMaker@bryantchou · co-founder, webflow
Vincent Bidaux
Vincent Bidaux@vinchubang · Front-end dev, digital design, img prod
The first Webflow component that you partially design inside of the viewport! It's a big deal! Very simple and intuitive, going to ease a lot of pain on certain designs.
Ben Parker
Ben Parker@rileyrichter · Customer Success @ Webflow
Oh, this. This is mind-blowing! What an amazing feature. Can't wait to put this grid to work on a couple of sites I have in progress! :)