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

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 it were on the grid. Developers had to think up creative hacks using tables, floats and clear fixes 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 grid 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 which make 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.

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 in One Dimension; The Grid controls in Two.

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. In addition it can take much 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 leads 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 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 increases productivity

Developers can finally think about layouts in a language that makes 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 grid.

This lets developers more easily code what designers want, more quickly, and with their sanity still kept intact.

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 (again) to what this guy 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?

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 the following mobile websites.

Wikipedia

and Twitter

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?