People like to make fun of Javascript but CSS doesn't get enough heat. It was absolutely awful and still is in many ways.
Even Flexbox is a convoluted mess with a strange naming scheme.
CSS Grids just makes so much more sense intuitively for what it's trying to do.
Tables don't have the same issue -- once you learn the syntax for tables, you never forget. And even bootstrap is a bit more memorable. But css grid always requires a few trips to stack overflow.
Everything else about it is fantastic, but I wish they thought more about intermittent users.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-templa...
And, if you find yourself repeating yourself, you can use variables!
When I first learned grid, I could only figure out one or two things. Then I got ok with a few things, then I went crazy and made a magic framework.
Now, I only use primarily these:
display:grid;
grid-gap: [value];
grid-template-columns: 1fr max-content, etc...;
I think the distinction and the small crossover is pretty clear to anyone who's used them.
To me Flexbox is still pretty natural. Names might be weird but there's not a great deal to know and it was the first CSS layout that actually IMO checked enough boxes not to be maddening.
Meanwhile, desktop application developers have ALWAYS enjoyed decent, predictable layout mechanisms. It is so frustrating that it took the web-based world 2 decades to get their shit together.
CSS-grid is built into the CSS standard itself and should have been there from the beginning. It took way too long, but I am glad it's here now.
Simple example, in the Grid Garden, on Level 3: grid-column-start is the grid cell it starts on, but grid-column-end is the cell after the one it ends on (half-open range), but on Level 4 when start is 5 and end is 2 its the opposite: the end column is included but the start one is not. Also, why would you do it in reverse like this even? And in Level 6, why -3 and not -2?
Honestly, I'm more confused now than I was before. At least placing the top-left corner and using span makes sense to me. I guess its better than making grids in other ways, but why did it have to be so weird?
It looks like IE11 doesn't have full support for flex box or css garden..is that correct?
[0] https://www.zdnet.com/article/microsoft-security-chief-ie-is...
[1] https://techcommunity.microsoft.com/t5/Windows-IT-Pro-Blog/T...
https://caniuse.com/#search=flexbox
Grid: "Partial support in IE refers to supporting an older version of the specification"
https://caniuse.com/#search=grid
IIRC IE implemented Grid first but their spec had enough problems that the standard isn't much like it.
It's iffy, but IE was the first to support any grid spec. I'd build a float based layout and progressively enhance newer layout methods
To me the named areas are the first time that CSS layout makes sense and I first did layouts in tables in the late 90s.
Best 40 minutes you'll spend if you want to learn CSS Grid! :) First 5 mins are a bit of history, with grid starting at the 5 min. mark.