When I try, I don't get the nice behavior of tables, but a stiff layout that does not adapt to its content. Instead the content overflows the rows:
https://jsfiddle.net/3hfosn5k/
The nice thing about tables is that I know the table cells will always surround their content. Nothing will flow out of the cells.
One of the nice things about grid is that you can size the tracks on the parent element, and all you have to do on the children is specify which rows/columns they span. It works much better when you want to do the sort of things you use rowspan and colspan for with tables.
EDIT: Setting height: 100% was also preventing the grid from expanding. Try this JSFiddle https://jsfiddle.net/c3m2194b/
Yep, it's nice to have an alternative to flex (where children determine their own size with flex-grow / flex-shrink / flex-basis).
> Setting height: 100% was also preventing the grid from expanding. Try this JSFiddle https://jsfiddle.net/c3m2194b/
This is an issue I've run into a lot. Well the opposite, when I want overflowing grid cells to gain a scroll bar instead of expanding the parent. Turns out this is only doable if the grid element has an explicitly defined height, which means hard-coding a height like `height: 50vh` or ensuring every ancestor of the grid has `height: 100%` defined, which is pretty gross.