A very well done presentation on CSS Grids makes quite clear that the way we design websites will really change in the future. In the future? No!! According to Morten Rand-Hendriksen we now can use CSS Grids to design. And now Webflow is implementing a new backend infrastructure we now that the new Designer is around the corner (See the message “Beta Release: New Designer Canvas”). So I’m sure it won’t take long until we see important new features like CSS Grids in Webflow!!!
That will mean we will see a new future with a semantic way of building design. Blocks which can be organised logically and hierarchally without using nested divs within nested divs. Even a big step forward from Flexbox. You should watch the great presentation on Youtube to see what it means for us all (it’s a more than half hour watch, but presented in a way that makes you forget the time ).
Curious what other designers here on the Webflow platform think of this.
“Serve up the mobile version of the site to modern browsers that don’t support grid.”
Yeah. Nah. It simply isn’t ready.
Also, grid is nowhere near as “revolutionary” as it’s being sold. The first thing you have to do when using it is the exact thing he spent the first half of the video telling us we wouldn’t have to do anymore… create a big container to hold the grid in the first place. Then you have to nest grids in order to do anything more specific than general layout, which is EXACTLY the same thing we do now.
OK, you may be right. I curious how you would render the design examples which Morten shows in his presentation in Webflow. From what I saw, it is impossible to reproduce these different media-viewports in Webflow with just css.
If you want to move things around on different viewports (I’m not convinced that is as much a “need” as is presented), then right now you would basically need to duplicate something in two different places and turn one or the other on/off depending on the viewport size.
That is pretty much the main thing grid has going for it. But how often would you change the order of elements on a website for different viewpoints, even if you could?
I’m not saying CSS grid is useless, or even bad. I am just saying it is something that would likely be relegated to nothing more than general layout and would produce no different results than what we do now, with the exception of very few use-cases.
Thanks, but your argument doesn’t convince me. The same can be said of Flexbox. Besides: CSS Grid has the advantage of cleaner and far more semantic html, which is I believe one of the reason that the New York Times started working with it.
If you watch the video, he explains that there’s a complete separation between presentation (done with CSS) and semantics (the HTML). The way we build websites today, we are supposed to write semantic HTML but in reality, we pollute it with containers that have no semantic meaning.
I agree this is huge and as long as Microsoft browsers are going to align, CSS grid is going to be a game changer. It gives power to content creators, in an unprecedented way. It’s a shame that today we still have to understand how the box model or floats work, in order to structure web layouts; it’s an unintuitive way of working, and a technology that was not created with that purpose.
Since Webflow aims at making things easier, I really hope that CSS grid are going to be supported asap. I guess this is going to be a significant technical challenge (as far as I know, Webflow is built on Bootstrap), but yes, I really think the right implementation of CSS grids are going to be essential soon.
Mobile-first also makes sense. And on top of that, it would be great to have an easy way to manage fluid typography, without delving into the complexity of CSS syntax. Once laying out a web page becomes second nature, I can even see Webflow as a potential prototyping tool for relatively simple products.
So you suggest to keep using unintuitive technology that was not meant to be used for web layout? I really don’t understand your point. CSS grid is certainly a step forward. I applaud a system that lets me focus on content without getting crazy about containers. Nested grid doesn’t seem to be a very common scenario, and I guess the nesting would still take place at a CSS level rather then at HTML level, so I am not sure what you mean. The technology will of course have to get better over time, but at least it’s going to make things a lot easier.
).