When I try that, the rows do not expand if the content is larger than 33% of the screen height:

https://jsfiddle.net/3hfosn5k/

Scroll down and you will see that the blue color of the bottom row ends and the text overflows it.

But I want what table cells do: Expand if their content is too large to fi.

Hey there, I thought about this for a little bit because I find table layouts more pain than they are worth and the secret sauce that's missing from the examples above is nesting!

Just like Tables have <table> and then <tr> - your div's need a similar parent-child relationship to work.

Here's a working fiddle: https://jsfiddle.net/0389jsca/

Don't put the grid on the body:

https://jsfiddle.net/y15qszjp/