It feels good to me, having two sets of rows where the individual rows accordion open to accept content when needed, and collapse to zero height when not, with a “blank” row in between the sets that pushes them apart.
When Eric first tweeted about the new design on his site, I thought something a bit unusual was going on with the CSS layout. I actually dove straight into the source that day and learnt a little about using negative row/column indices that I'd not really considered before. Still, I missed this clever trick he's using. By having a set of rows at the top and bottom of the page that may or may not contain content, he creates an "accordion" like layout. If content exists, the row expands to give it space; if it doesn't, the row collapses to nothing. The trick is having one row in-between those groups with a height of 1fr, thereby expanding to fill/fit all the necessary content.
Eric does point out that, in theory, it seems like leaving out that flexible middle row should still work, but he has a niggling suspicion it'll cause issues. Which is funny, because I have the same (unfounded) suspicion 😁 As I was reading down the article, my reaction was initially "you can't do that with rows" and then "aha, that flexi-height row will make it work". I'm just not sure why...
