1. ability to set flex properties for the children (e.g. grow)
2. "templates" (if you go to Bootstrap, they have a few, e.g. with header, with header+footer, etc)
Not always—there are definitely practical things you can achieve with Grid that you can’t with previous layout options, I’ve made a couple myself—but almost always.
Most layout scenarios that are in two dimensions can actually be solved with nested single-dimensional layout. Sometimes it’ll be easier to solve them with a proper two-dimensional layout, and I tend to prefer the markup that Grid lets me have, but I find two-dimensional layout that can’t be solved with nested single-dimensional layout to be uncommon.
Also, most interface problems are actually single-dimensional.
I think Grid will become more popular than it is, but never overtake Flexbox as most people’s go-to for layout, because Flexbox is normally enough, and Grid is too complex. I use it from time to time, and I have taken the trouble to know exactly what it’s capable of, so that I know when I should reach for it rather than Flexbox or something else or giving up, but I normally need to look up various properties when I go to use it. Meanwhile, most of what people want to achieve with Flexbox is just `display: flex;` plus `flex-direction`, `flex`, `align-items` and `justify-content`, and there are few enough knobs that you can essentially brute-force it without trouble—and the Flexbox Inspector makes it even easier, in a way that the Grid Inspector can’t really because Grid is just too powerful.
Two big things in grid come to mind that make me use it much more than flexbox: grid-template-areas, and being able to overlap cells using lines.
In general, having a flexible first-class 2d layout is much easier to work with and change later than having nested 1d layouts.
Flexbox will also have you scratching your head and randomly changing css values because your layout is completely messed up and you have no idea why.
I usually have this cheat sheet open:
I like because it has the "applies to: container/items" clearly shown for each property, which I always forget...
The next thing I want to try is using css transitions to "animate" flexbox containers so that dynamic content inside smoothly expands the height of the container down the page, instead of the abrupt jump we're used to. I haven't managed to crack this yet, but heard a rumour that it's possible. So if anyone has tips.... (edit: found this which details the issue, and describes said flexbox trick: https://css-tricks.com/using-css-transitions-auto-dimensions... )
Take debugging as an area where I think it is fair to say that Chrome is miles ahead at present:
Chrome’s debugger is fast; pausing normally takes under a second to finish updating the UI, and stepping mostly takes a slight fraction of a second. It is also particularly helpful, showing the values of variables at the end of each line when stepping through.
Firefox’s debugger is slow; pausing typically takes several seconds for the UI to catch up, and stepping tends to take a second or two, with some UI thrashing. It is unreliable in the presence of source maps (you put a breakpoint on line 1234 of the source? Well that translated to line 1 in what’s actually being executed, and breakpoints are no more precise than linewise, so… yeah). Firefox Nightly’s debugger is also currently completely broken for me at FastMail due to https://bugzilla.mozilla.org/show_bug.cgi?id=1516941, so I’m having to spin up Chrome when I need to do any debugging, which I don’t like having to do. In the normal run of things, I stick with Firefox even through its slow debugger, because I do find that it does a better job in some areas of debugging (I think it was examining values and operating at varying layers of the stack).
For personal context: I’ve been a Firefox user since about 0.93, and have had Nightly as my daily driver most of the time for several years. I don’t much like Chrome. That doesn’t stop it from being better in certain areas, though.
This is an interesting choice for a desktop developer tool. Was this purely a design choice, or did the new structure end up being more accessible?