Basically, a list of items arranged in a grid where the number of columns is dynamic depending on the width, items are wrapped dynamically from left to right, each column consumes the maximum amount of space, there's a fixed gap between columns, and the last row is aligned left, not stretched. I had to build one recently, and it was a perfect fit for grid.
Also, I think that tutorials for things like flexbox or grid should include fallbacks for older browsers. Because generally frontend devs simply copy the code from tutorial so if you don't include the fallback, they won't implement it.
> Also, I think that tutorials for things like flexbox or grid should include fallbacks for older browsers.
Well, a sensible fallback for that grid list example would be to inline-blocks with a fixed number of columns.
For instance, I recently made a component to be included on other pages at work. It had to look good no matter the size the page gave it. So they might put it into a 400px wide container, on a 1600px wide page. If I used vw or media queries to draw it based on page size, it would behave wrong.
Every time a float is used a Servo dev gets another grey hair.
Jokes aside, floats are Ok, but they make parallel layout from very hard to optimize, to no better than just using a single thread.
If you're setting precise sizes in flexbox, or very specific flex values, you're probably in Grid territory. Ideally, flexbox is best when you want things to stretch/shrink to fit and you want the items to determine their own sizes. Grid is best when you have a specific layout/sizes in mind, and you want to impose that layout onto the items.
When hovered, the hidden content will appear via an animated dropdown. The height of the content varies as well.
Hopefully that makes sense.