Flexbox vs CSS grid

Algaris · 2019-06-03 14:33:04

In preparation for a large site refresh I’ve been refreshing my coding skills, and learning new web techniques for laying out and styling content.

As part of this I’ve been teaching myself flex box (which I think is a vast improvement over the old ways). During my research however I stumbled across CSS grid which I’m now reading up on.

My questions are:

1. What’s the difference between flexbox and CSS grid?

2. When should you use one over the other?

3. Will CSS grid make flexbox obsolete in the future?

Last edited by Algaris (2019-06-03 14:36:57)

colak · 2019-06-03 14:44:53

I think that CSS grid is not as compatible as flex in certain browsers.

philwareham · 2019-06-03 19:03:06

1. Flexbox is for flexing (stretching, condensing, aligning) boxes, CSS Grid is specifically for making complex grids. There are some crossovers but they are both powerful at their specific task. Flexbox can be used to make a grid layout but isn’t as comprehensive for that task as using the actual CSS Grid module.

2. You should use Flexbox when you want to flex boxes, you should use CSS Grid when you want to make grids. It’s really that simple! Although right now if you want to use CSS Grid and still support IE11 then you’ll need to create a Flexbox fallback just for that browser. I can show you how if you wish.

3. No.

jakob · 2019-06-03 19:51:38

Nice concise summary, Phil!

If you haven’t discovered her already, Rachel Andrews has written masses on both Flexbox and CSS Grid and is a real expert on the subject. See, for example:

Quick what’s the difference between flexbox and grid
A complete guide to Grid
A complete guide to Flexbox
Her A Book Apart book The new CSS layout which puts it all in context of existing layout methods and provides an excellent basic overview.
And then there’s a whole css workshop video course if you have money to spare…

Destry · 2019-06-04 11:55:51

Jen Simmons is another significant educator in this area. Her Labs is demonstration of the ideas, and if you’re into videos, her YT channel, Layout Land, is full of tutorials. (I used an invidio.us link there).

jakob · 2019-06-06 07:19:11

Popped up in my feed this morning: an animated tutorial of css flex illustrating its behaviour in different situations.

Algaris · 2019-06-06 08:25:46

Thank you so much for all of your replies and the links. This is huge help for me getting to grips with Flexbox and CSS Grid.

philwareham wrote #318360:

Although right now if you want to use CSS Grid and still support IE11 then you’ll need to create a Flexbox fallback just for that browser. I can show you how if you wish.

Yes please. That would be immensely useful.

As my work has gradually evolved from web design/development into e-learning with development/server maintenance on the side I feel I’m playing catchup with the latest techniques and standards. My worry with Flexbox was that I could end up down the rabbit hole, learning what I thought was current only to find out that things had moved on.

philwareham · 2019-06-06 09:26:31

Algaris wrote #318384:

Yes please. That would be immensely useful.

OK sure, I’ve crested a Gist to show the (Sass format) CSS that I generally use everywhere to create a grid layout with flexbox fallback:

gist.github.com/philwareham/af7199e054f7ffe44b1deb1a13d6c8c3

Note that as it’s a mobile-first layout you don’t need to specify the grid until at least the first breakpoint (below the first breakpoint the cell <div>s use their default browser behaviour of 100% width of container).

And you can see it in practice on my framework demo here.

Textpattern CMS

Textpattern CMS support forum

#1 2019-06-03 14:33:04