Is CSS Grid Layout the answer?

authored by Matt Honeycutt 2/1/2017 6:16:05 PM

We moved away from table layouts on the grounds that "content and structure should be completely separate from presentation!" And when it comes to making "grid" style layouts, that has caused us nothing but pain ever since. Think of all the hacks, tricks, etc. we've had to use to achieve things like vertical centering, 100% height columns, etc, using just divs.

With many modern frameworks, we aren't separating content and presentation anymore: we're actually putting JavaScript, HTML, *and* CSS all in the exact same file! And if you look at other presentation languages, like XAML, they don't try to hid the fact that you're laying things out in table or grid form: it's right there in the markup.

So, is CSS Grid really the solution we need? Is continuing to try and separate presentation and layout the right answer? Or should we be looking at something more like XAML, and should we embrace combining some presentation and content again?

I definitely see pros and cons of each approach. I like the idea that, with CSS grid, I can change the shape of my grid for different device sizes. But I also like that I can tell immediately what the intended layout is when I look at XAML.

Anyway, those are my thoughts. I'm definitely not an authority, and I plan to use CSS grid regardless once it is more widely supported. But I'm still not sure it's the "right" solution. What does everyone else think?

About the Author

I'm a web application architect with about 15 years of experience on the Microsoft stack. I <3 (good) JavaScript, CSS, and HTML, too!

7 comments

Bob Senoff

2/11/2017 7:06:58 PM

I think this quote from @chrishouse83 is helpful "An important thing to understand about Grid is that it's not ready to be used in production yet. It's currently a W3C Working Draft and isn't supported correctly in any browsers yet by default. Internet Explorer 10 and 11 support it, but it's an old implementation with an outdated syntax. In order to experiment with Grid today, your best bet is to use Chrome, Opera or Firefox with special flags enabled." Safari now has announced support for it.

Rachel Andrew

2/12/2017 11:14:41 AM

@bobsenoff In about a month Grid will be supported by Safari, Chrome and Firefox plus the old implementation in IE/Edge. So for many people that will be 70 to 80% of visitors with grid support. More here (written before Safari announced their plans): https://rachelandrew.co.uk/archives/2017/01/03/css-grid-is-coming/

Branko Pejić

2/12/2017 5:59:37 PM

CSS Grid is definitely a future of web development, it's solving many of headaches that we had, and still have, as Web developers. Is it ideal solution, it's hard to say, time will tell, but my thought is that it's definitely path to the right direction. Anyhow it is good to get familiar with Flexbox and CSS Grid to stay on board of web development of the future. :)

Bob Senoff

2/17/2017 11:11:22 AM

Rachel Andrew posted this presentation http://javascriptkicks.com/articles/108248/css-grid-layout-by-rachel-andrew

John Hartley

2/17/2017 3:09:22 PM

So far I'm not overly impressed with Grid. Flexbox gives you pretty much everything you can get with flex and without learning a whole new syntax. I realize that makes me sound like a curmudgeon that doesn't want to learn something new, but what additional benefits are there that we're not getting in flex, which is already supported by all current browsers?

Matt Honeycutt

2/20/2017 4:01:01 PM

@johnbhartley This presentation by @rachelandrew actually provides a good explanation for the benefits Grid provides over Flexbox: https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/ Basically, Flexbox handles "flow" for a single dimension at a time, while Grid can do both. You still won't need (or want) Grid for everything, but I can think of at least one project I worked on recently where Grid would have been a better fit than Flexbox for our layout. That said, I'm not looking forward to memorizing a bunch of new settings either. :(

Paul Bailey

2/17/2017 3:46:36 PM

When I did GUI development back in the day, but I still think its relevant today, there were 3 different "layout managers". Position, Pack, and Grid. Position was for aligning things by pixel like absolute/relative positioning in CSS. Pack was basically today's CSS flexbox, and Grid was basically CSS grid. Each technique was needed for different purposes. So just choose the right tool for the job. However, by default for a window layout or in web terms, a page layout, I would use Pack/Flexbox. I found it easier to make responsive windows that would work with multiple sizes. Some devs I think like grid better by default and you can still do responsive with grid too. So I'm guessing you'll probably pick grid or flexbox as your go to but you need to know all three in order to build UI's in an efficient manner.