Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

Algaris
Member
From: England
Registered: 2006-01-27
Posts: 441

Flexbox vs CSS grid

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)

Offline

#2 2019-06-03 14:44:53

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 7,246
Website

Re: Flexbox vs CSS grid

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


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | Respbublika! | NeMe @ github

Offline

#3 2019-06-03 19:03:06

philwareham
Core designer
From: Farnham, Surrey, UK
Registered: 2009-06-11
Posts: 3,192
Website

Re: Flexbox vs CSS grid

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.

Offline

#4 2019-06-03 19:51:38

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,435
Website

Re: Flexbox vs CSS grid

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:


TXP Builders – finely-crafted code, design and txp

Offline

#5 2019-06-04 11:55:51

Destry
Moderator
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,193
Website

Re: Flexbox vs CSS grid

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


The text persuades, the *notes prove。

Offline

#6 2019-06-06 07:19:11

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,435
Website

Re: Flexbox vs CSS grid

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


TXP Builders – finely-crafted code, design and txp

Offline

#7 2019-06-06 08:25:46

Algaris
Member
From: England
Registered: 2006-01-27
Posts: 441

Re: Flexbox vs CSS grid

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.

Offline

#8 2019-06-06 09:26:31

philwareham
Core designer
From: Farnham, Surrey, UK
Registered: 2009-06-11
Posts: 3,192
Website

Re: Flexbox vs CSS grid

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.

Offline

Board footer

Powered by FluxBB