CSS Grids — How Everyone Has Been Building The Web Wrong Before 2018
Meet the new CSS feature that web developers needed so badly, they had to create crappy substitutes of it…until today
This article is cross-posted on the Inlight’s website.
Say you’re a Tech Director. Or a Product Manager. Or a Web Designer. Or an incredibly literate, horrendously anachronistic stegosaurus with a penchant for web design.
Either way, you may know that we Front-End Developers like to neatly arrange parts of a website by imagining the space on a webpage as a “grid”.
If you’re as cool as I am, you may have even heard of the most common “grid” framework on the planet — the Bootstrap “grid”.
The Impostor Behind The Face of The Web
You might’ve noticed that I say “grid” with air quotes (and with a slight hint of condescension).
Well, that’s because…you may not have known the deep, dark, horrifying secret about the “grid” you’re using that Front-End Developers aren’t telling you.
That “grid” you’re using? It isn’t actually a grid.
There’s something wearing the grid’s skin, disguising itself as the grid you use everyday. Unsettling, I know.
That Thing? Its name is Flexbox.
But now, the CSS Grid — the One True Grid — is supported by almost all major browsers and ready to reclaim its rightful throne.
It is time we killed the Flexbox grid.*
* OK, I may be a tad dramatic here. Flexbox still has its uses, but it’s time to shove it back into Pandora’s Box and take it out only when we need it.
The Origins of A Supervillain: Flexbox
To understand why flexbox grids must die, we must first know why Front-End Developers created flexbox grids in the first place.
When Web Designers and Developers are deciding how to neatly position different items on a webpage, it’s helpful for us to visualise the space of a webpage as series of columns and rows, i.e. a grid.
However, CSS originally didn’t have the functionality to easily lay out items as if were on grid. Developers had to think up creative hacks using tables, floats and clearfixes to achieve that look.
Then flexbox came along to CSS and made things easier. It allowed developers to put items in invisible boxes that either laid out its contents in rows or columns.
Developers began to notice they were all using flexboxes the same way — to arrange items in an imaginary grid, so why not create a ready-made flexbox grids to help other developers save some time?
So What’s The Deal With Flexbox Grids?
But flexbox grids had (and still has) many problems and limitations.
For one, it doesn’t actually put things on a grid. Not really. It places items in boxes that makes things seem like they’re on part of a grid.
The result? We have to put boxes in boxes in other boxes.
This results in very messy and unsemantic (read: confusing) HTML code.
Secondly, it’s incredibly hard to move items inside one box to another. Designers usually want to do this when an item like the sidebar looks better on, say, the top of the page on desktop but on the side of a page on smartphones.
These are hacks.
Ugly, inelegant, anti-accessibility hacks.
HTML is just supposed to tell users what content to display. It should be CSS’ job to make the website look good and arrange items on the page.
The result of breaking HTML is that screen readers would throw a fit and confuse everyone using them if they start reading one part of a page that suddenly moves to another part of the page.
Before CSS Grids, Flexbox was the next best thing.
But now, it’s time to build websites the way they always should have been built — with actual grids.
We’ve been struggling fix what’s been broken about web layouts since the dawn of time (aka the 1990's), moving from one CSS hack to another. Tables, floats, flexboxes — they’re all just spokes on a wheel. This one’s on top and that one’s on top and on and on it spins.
The CSS Grid isn’t going to stop the wheel.
It’s going to break the wheel.
‘Web layouts have always been broken; we’ve just refined how we break them. Until now. CSS Grid is a paradigm shift [that requires us to] rethink everything we think we know about web layouts.’
— Morten Rand-Hendriksen, CSS Grid and the Future of Web Layouts
Why CSS Grid over Flexbox Grids?
The root of all Flexbox’s aforementioned evils stem from its one weakness:
With flexbox, you can choose either to lay out items horizontally or vertically. You can’t do both at once. With the new CSS Grid Layout, you can.
Flexbox controls One Dimension;
The Grid controls Two.
(This adage is inspired by Rachel Andrew.)
With the arrival of the CSS Grid, not only can we abandon the bloated flexbox grid frameworks, we can achieve all that flexbox “grid” frameworks can do and more with just plain CSS.
Here are 3 reasons why CSS Grids are to flexboxes what Teslas are to Fiats.
1. CSS Grids make better products
Flexbox’s weaknesses are CSS Grid’s strengths.
Building two-dimensional layouts using one-dimensional flexboxes results in really messy and unwieldy code.
This makes developers sad. And things can take unexpectedly longer to fix strange layout issues.
With CSS Grid however, we can Make Web Layouts Great Again:
- Cleaner HTML: You no longer need HTML flexbox wrappers inside other flexbox wrappers inside other flexbox wrappers, just to place items in the right spot.
- Smaller CSS: Say goodbye to bulky grid frameworks like Bootstrap with over 1,000 lines of CSS code, just to build a fake grid system. The CSS Grid comes as part of CSS, no assembly required. Plus, using CSS Grids makes your CSS much cleaner and more understandable too.
For developers who’ve grown familiar to their trusty old flexbox grids, shifting towards CSS Grids will take some getting used to. But this effort will benefit your team in the long run — resulting in cleaner code, more productive developers, shorter development times, and a less buggy product.
2. CSS Grids lead to better designs
Unleash the potential of white space, three-dimensional layers, and teleporting webpage items
CSS Grids opens the door for you to create more interesting and ambitious responsive layouts for your website.
You are now able to freely move items across a webpage without reluctant developers complaining that this needs tricky workaround coding.
But what’s more, CSS Grids also lets you make use of empty spaces or to layer items on top of each other in your designs. (Again, without whining developers.)
While items in flexbox grids are more like tetris blocks that have to touch one another, the CSS Grid adds almost unlimited control over where you can put items —
You can place items in a vacuum of white space.
You can place items items on top of one another.
And you can easily make those items come in a variety of widths and heights because you now have complete two-dimensional control.
Admittedly, all these things are technically possible with flexbox. However, it would be much, much harder to code and require some tricky CSS manipulation to achieve. Also, it won’t always reliably behave as you’d expect.
3. CSS Grids increase productivity
Developers can finally think about layouts in a language that make sense
With CSS Grids, what you see is what you get.
There’s no need for developers to mentally translate Designer speak about grids into another paradigm for Flexbox Land which plays by a completely different set of rules. No, the CSS Grid allows developers to think of grids the way “Normal People” naturally do — as grids, not as a bunch of boxes we need to manipulate to make items look like they’re in a grids.
This lets developers more easily code what designers want, more quickly, and with their sanity still kept in tact.
But what about Internet Explorer?
Sigh. It’s time to look at the elephant in the room.
In typical fashion, IE supports an older spec of CSS Grid, so IE handles CSS Grid differently from Chrome, Safari, and even Edge.
So what should you do?
Listen to what this guy (again) has to say at 23:49 to 25:50.
In short, don’t let IE use the CSS Grid.**
** P.S. Developers, my people. You can do this by using the CSS
@supports rule that tells the browser to ignore Grid styles unless it supports stuff that exist in the new Grid spec, like
grid-area: auto. Sadly you can’t just auto-prefix things to make Grids work in IE since the implementation of identical properties is radically different between the old Grid spec and new Grid spec. Nope, no polyfills either. Sorry.
Wait…but wouldn’t that mean your website will look different on IE compared to other browsers?
And that’s a good thing.
That’s progressive enhancement, baby
To make sure your website looks good on IE without the CSS Grid, designers simply need to make sure their mobile device designs also look decent on larger computer screens. We then deliver the mobile experience to IE.
Both Wikipedia and Twitter have proved that simple mobile experiences can work beautifully on larger computer screens.
This approach of offering the best possible basic experience, and then adding extras based on the capabilities of more advanced browsers is called progressive enhancement, and is ideally what you should be doing anyway.
You’re not sacrificing your IE users — you’re offering them a simple, clean experience that your mobile users benefit from.
Be The Change You Want To See
In the end, this industry needs a handful of innovative leaders to embrace advanced technologies and drive its adoption. Leaders like you.
IE support didn’t stop The New York Times switching to CSS Grid…all the way back in May 2017.
Why should it stop you?
So, what now?
If you’re interested in learning how to use the CSS Grid, be sure to check out Morten’s (the guy in the YouTube videos above) awesome new video course on LinkedIn.
CSS: Advanced Layouts with Grid
Learn how to take full advantage of the capabilities of CSS Grid to build interfaces that are attractive, accessible…
P.S. Also, stay tuned for my upcoming article, ‘The Developer’s Handbook To CSS Grid’. Take a look at my presentation on CSS Grids if you can’t wait:
Let me know what content you find useful — click the 👏 button below or post a comment!