Uneven Grid Rows

[shaunrashid]

Hi Rachel, I was wondering if there was a way to define rows in a grid so that the first row shrinks to fit the size of the content within it and the second row would fill up the remaining space. I feel like it should be something simple and I'm missing it.

Here is an example Codepen: https://codepen.io/shaunrashid/pen/XamGaj

In the example, I have a single piece of markup where in one case, I want the "Hello World" above the image and other text and the second case, I want the "Hello World" to be beside the media and on top of the content. However, in the second case, I don't want the white-space between the two rows.

Thanks, Shaun

[rachelandrew]

Do you have an image of the desired result? I'm not sure what you mean by remaining space.

Also, if you can post a reduced test case (HTML/CSS, modern grid spec with no fallbacks etc.) that makes it easier to take a look as I have limited time.

[shaunrashid]

I updated the Codepen to remove the fallback stuff.

This is the desired result for Layout B in my Codepen (https://codepen.io/shaunrashid/pen/XamGaj):

I would like to know if there's a way to get the grid to scale in the way depicted in the screenshot without changing the current markup (which works fine for Layout A). I'd like the heading to shrink/grow to the size of it's content and then have the rest of the content take up the rest of the vertical space.

Thanks so much for your time.

[shaunrashid]

Sorry for wasting your time, Rachel. Just turns out I should read the spec in more detail. I think I got what I was looking for. For everyone else's reference, here are the two Codepens. My first attempt, and the solution:

First Attempt: https://codepen.io/shaunrashid/pen/XamGaj

Solution: https://codepen.io/shaunrashid/pen/PKZjWa

[jensimmons]

Shaun, it sounds like you also want to wrap your head around minmax(), fit-content(), and other options besides auto. I've got a demo in progress at: https://codepen.io/jensimmons/pen/QpZpWR?editors=1100