I realize that the difference is that the items are laid out horizontally, i.e. photos 1-2-3-4 are all across the top, whereas with vertical flexboxes items 1-2-3-4 would end up in the first column (or you'd have to rearrange your divs taking the flexbox layout into account, which is often impractical).
But the gain from CSS Grid Lanes is not immediately obvious from looking at the first photo, as it's so very similar to the old "left is flexbox, right is grid" examples from when Grid was new.
+-------+------------+ +-------+------------+ +-------+------------+
| state | population | | state | population | | state | population |
+=======+============+ +=======+============+ +=======+============+
| AL | .... | | DE | .... | | MI | .... |
| AK | .... | | FL | ..... | | MN | .... |
| | | | | | | | |
I dislike the idea that CSS should be made more complex. Everyone is doing the same template with Jumbotron anyway.
Pick the colors, pick imagery and name for the brand - doing some magic with CSS will only piss off people.
Cookie cutter design is what I like. I can compare the companies when they all have the same template for a website.
curious how this works, huh.
seems like the same institutions starving to push browser updates are also authoring standards.
>who need to keep things fast and responsive reality says otherwise. but they definitely need to push updates.
Grid covers a lot of very subtle use cases that have historically required hacks like a list of select options where some can have icons on the left and some don't. You just need a subgrid that will automatically position every element in the select correctly to align them, regardless of whether there is an icon or not within the element in all select items. Previously you'd have to add a fixed width padding to the left and check if all the select items had icons. It also correctly scales the width and height of a row of items like cards where you want to ensure the alignment of headers, content, image etc depending on if that stuff is in there or not. You can have text missing and the card will still take up that size because your subgrid has defined it so. All of this needed JS, complex CSS hacks and so on. These aren't obscure features these are commonly used layouts that required a lot of time and effort to make it look nice.
[1] https://webkit.org/blog/17660/introducing-css-grid-lanes/