I've got a layout where I've got a certain category of content can appear in several different places on the page and I'd like to control how the content in these instances is laid out by using a CSS grid. The main part of the content is to be displayed in a center area and have two sidebars around it that are filled with text in a decorative sort of way. That is, the decorative text is a very long data-driven set of words related to the content but not really meant to be read and are expected to just overflow out of view. For example, image that the content is a description of a sport and the decorative text is a long list of names of that sport's famous players. Here's a screenshot that mocks up what I'm talking about:
And here's the CodePen it came from
The center text is, of course, the important text and should always be visible for reading. We're just talking about a few words to a few sentences (no huge paragraphs or chapters) so the center contain should just naturally size itself to the content like any common div element.
The screenshot above only works because the height of the center grid area is explicitly set to 20rem which gives the left and right sidebars a hard measurement to clamp down on and set their overflow points.
grid-template-rows: auto 20rem auto;
The problem is that the center content varies enough that there's no one static row height that looks good in all circumstances. You either get awkward whitespace when it's too big or messed-up text and layout if it's too small (go ahead, tweak the value in CodePen and be horrified). I've tried setting minmax() values, but then the long decorative text ends up setting the overflow threshold and I'm back to the excessive whitespace problem.
I guess I'm looking for some magic CSS setting that tells the grid-template-row definition to let one grid-area own the auto value and then limit the remaining areas to whatever real rendered value that ends up being.
(The larger context it that this all lives in a full React-based SPA, but I'm trying to see if I can get away without resorting to useLayoutEffect() and component refs and all that.)
