Webflow
p/webflow
Create custom, responsive websites, visually
Ben Tossell
Grid Layout Builder by Webflow — A completely visual way to build CSS grid–powered layouts
Featured
28
A transformation layout system — made visual in Webflow. Experiment and build unique, responsive, production layouts using CSS Grid.
Replies
Kirill Zubovsky

Have been hosting Rad Dad show with Webflow for about a year and have been recommending them to everyone. Best design tool for the buck. You no longer need Adobe or Sketch or inVision, just go into Webflow and publish as soon as you're done. It's magical.

Pros:

Easy, fast, reliable.

Cons:

Has some learning curve like most professional software

brryant
Top Product
Maker
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!
Mat Vogels
This is so crazy good it's a bit scary. Excited to put it to use. Congrats @webflowapp team!
brryant
Top Product
Maker
Mackenzie Child 😻
Woah! 😵 So excited to play with this 🙌
Duiker101
Unfortunately the link seems to give me a 404
brryant
Top Product
Maker
@duiker101 Whoops we accidentally scheduled a day too early. Dates and time is hard… CSS Grid shouldn’t be! thanks for letting us know, the link should be good now!
Chuck Phipps

The promise of CSS Grid has been that "it changes everything" about creating web layouts, which has historically been the hardest thing for devs and designers. But writing the code isn't fast. When I saw how Webflow turns it into a real drag & drop, my mind was blown. This truly is a game-changer for web layout.

Pros:

It's web design as I always wanted it, like moving around boxes in Sketch or Photoshop. It makes CSS Grid ridiculously easy.

Cons:

It can't yet read your mind.

Tinh Nguyen
I can't view Webflow page. Link not found (404 error)
brryant
Top Product
Maker
@nguyendangtinh When you’re a bit too trigger happy on PH ... the link should be good now!
Ben Parker
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! :)
Vincent Bidaux
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.
Vincent Bidaux

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.

Pros:

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

Cons:

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

Jörn

I went back to a old projekt built with columns and just remade it with grid and it was really easy and fast to do.

Pros:

From twitter "Indesign for Web" Very intuitive and easy to learn.

Cons:

Can't really think of anything right now more than that you want even more functionality like being able to drop collections in the grid.

Brett Williams
I love Webflow so much I literally want to freak out. I have nothing else to say.
Enrico Cerroni
So basically people are upvoting without even checking it.... Also https://webflow.com/grid, that is the link I found on the youtube video, is wrong.
brryant
Top Product
Maker
@enricocerroni Appreciate the upvotes, but I hope you won’t be disappointed now! (link fixed)
Chris Cole
I've been building with @webflowapp for about 5 years now and I can't keep count of how many times I had a project that needed a grid setup, but I had to hack my way around it. Very excited to finally have a solution. I had a chance to demo this new grid feature and it's very very slick. Built out a couple of sites really quickly with it. My favorite feature is how easy it is to move content around and restructure the grid for other media queries. TL;DR - BIG FAN
Chris Cole

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.

Pros:

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

Cons:

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.

Federico Jorge
Nice GIFs, bad link.
brryant
Top Product
Maker
@federicojorge D’oh. A working link would be better than a nice GIF — fixed!
Mark Willis

This is crazy powerful and simple to use. The fact you can use this directly on the canvas is incredible.

I love the fact that on different breakpoints you can literally change the layout to exactly how you want it to look, and even have a different amount of columns and rows per breakpoint too all while still producing the clean code.

You can use it on dynamic pages and with dynamic content too.

Pros:

Stupidly simple to layout anything. No more divs in divs and flexbox aligning to get the layout I want.

Cons:

None found yet

Ghost Kitty
Comment Deleted
Hashim Warren

This puts advanced layout in the hands of many, many people. I want to see the web become more interesting, and this tool may help

Pros:

intuitive gui for controlling grid

Cons:

none i can think of

Bashir Aminu

Webflow is the most awesome tool for designers since photoshop

Pros:

I have no words

Cons:

You're kidding right?