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

Stephen Koo
Sep 15, 2017 · 9 min read

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”.

CNN’s website visualised as a grid. Image credit: webdesignerdepot.com

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”.

Behold, the almighty Bootstrap grid. Image credit: desigmodo.com

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.*

CSS Grid is supported by all major browsers… except Internet Explorer. We’ll address this later. Image credit: caniuse.bitsofco.de

* 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.

Etsy viewed as a grid. Image credit: envatotuts+

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?

Thus began the birth of popular flexbox grid frameworks such as Bootstrap, Foundation, Skeleton, and Bulma.

So What’s The Deal With Flexbox Grids?

Image source: Lego Message Boards Wiki

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.

Boxes all the way down. Image credit: Morten Rand-Hendriksen’s WordCamp Europe 2017 Presentation, Slide 9

This results in very messy and unsemantic (read: confusing) HTML code.

Flexbox cruft adds up. Image credit: Morten Rand-Hendriksen’s WordCamp Europe 2017 Presentation, Slide 24

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.

To do this, developers either just make copies of an item in several boxes and hide all but one of them at a given breakpoint, or use JavaScript to break the page and move pieces of HTML code from one place to another.

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.

Morten Rand-Hendriksen provides a great illustration of these problems (2:52–6:14 of the video)

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.)

Image credit: Sven Wolferman via maddesigns.de

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

Cleaner HTML, smaller CSS, fewer JavaScript hacks, and better accessibility

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.
  • Better accessibility: With CSS Grids, you don’t need to move HTML around using JavaScript hacks in order to responsively move items around. Breaking the HTML layout this way hurts accessibility anyway. Remember, layout is supposed to be CSS’s job, not HTML.

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

Designers, rejoice!

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.

With CSS Grids, designers can design jumping web items without hearing the wails and unrestrained sobs of the two front-end developers you’ve locked in the next room.

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.

With flexbox, this design is what your two developers talk to their psychologists about. With CSS Grids, your developers will laugh in the face of such puny design challenges.

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.

Image credit: shoze.blogspot.com.au

So what should you do?

Listen to what this guy (again) has to say at 23:49 to 25:50.

Again, my man Morten explains more eloquently than I ever could how to deal with IE (23:49–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?

Yes.

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.

Doubt this can be done? Take a look at Wikipedia’s and Twitter’s mobile websites.

The mobile version of Wikipedia on a laptop
The mobile version of Twitter on a laptop

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.

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:


Hi! If you like articles on CSS Grids, JavaScript, React, Sass/SCSS, or other cool web development guides, click the “Follow” button.

Let me know what content you find useful — click the 👏 button below or post a comment!

Stephen Koo

Web development knowledge, condensed into bite sized pieces.

Stephen Koo

Written by

Front End Web Developer | React, Javascript, Sass/SCSS | Constant Learner | Picking up: Go, Elixir, VueJS | Classic Literature Nerd

Stephen Koo

Web development knowledge, condensed into bite sized pieces.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade