Grid has extremely broad support.

https://caniuse.com/css-grid

The notable exception is IE 11…though even then, with a bit of autoprefixer magic, you may be able to use this.

or you could just use flexbox to do the exact same thing and have a superset of that extremely broad support, including ie11 without having to rely on any kind of magic.

https://caniuse.com/flexbox

I do use grid when I need it, but I don't see the point of using grid in places where flexbox will do. Granted this is on the verge of not mattering at all anymore, but I just don't see the point in using something less compatible when you don't have to.

I want to learn grid, and I keep waiting to be given a layout I can't implement in flexbox as an excuse. It's been years of waiting through multiple jobs.

I like grid because it eliminates the need for any elements that exist purely for layout. This makes markup cleaner which makes it easier to change in the future.

But as I stated in elsewhere in this thread, grid is not a replacement for flexbox. There is overlap, they both have their strengths.

the one thing i couldn't do with flexbox where I had to use grid was a sidebar that was being rearranged responsively, part of it below the main content, and part of it above. but yeah, most of the time flexbox + order can get you quite far

An acceptable subset of CSS Grid works on IE11. And if you use autoprefixer, 99% of the time would work out of the box.

I have not found this to be true at all. It's far less than 99%, and would require double checking all your work in IE11 to make sure it works. I tried some basic layouts and found that a lot of unexpected things occurred. If you're supporting IE11, CSS grid isn't worth it.

IE compatibility is increasingly rare. Grid is supported by 95% of all browsers globally. If your target group is any narrower, or if centering the content doesn’t break the page and you aren’t shy of serving a weird looking layout to people with old browsers, there is no reason not to use grid.

there is no reason not to use flexbox if all you want to do is center something. and that sentence doesn't even need any additional qualifiers.

What browser are you even worried about at this point? IE isn't even supported by microsoft any more.

That is not true[0].

[0]: https://death-to-ie11.com/

It is in the sense that they produce websites that no longer work properly with IE.

Grid is way better than flexbox. All hail CSS-Grid.

Grid is not a replacement for Flexbox, it compliments it. Flexbox excels when you are only concerned with one dimension, grid excels when you're concerned with two (ie, a grid!) And yes, there is overlap.

They have many overlapping capabilities, but there are things flexbox can do which grid cannot. For instance, flexbox can wrap with dynamically sized children.

Got a citation for this?

I’ve seen this said, and for the life of me, I can’t find an actual reference for it.

Citation: Purely subjective personal experience / opinion.

At least it’s first-hand.

They solve different problems.

In general: Flex is for flowing content, grid is for structured. You can do some awesome wrapping with flex that is impossible with grid. Also `margin-inline-start: auto` is pretty rad using flex, although you can do something similar with `justify-self` with grid.

A good use case for flex would be a list of tags, that need to wrap.

Also harder to learn.