Looking for help with CSS Grid auto-fit with the last item on its own row

Here's the deal:

• You've got markup you don't control
• It includes images wrapped in a <figure> tag
• The <figure> tag may or may not have a <figcaption>
• The <figure> could include one <img> or many
• You want the images to fill the available width, but if there are multiple, shrink down to 25% for 4-columns

What I have here almost works ✅, but in cases with a figcaption and fewer than 4 images, the images don't fill the available width as I'd like ❌.

Help! See the example on CodePen.

Comments

[Steven Garrity]

I've also tried a flex based implementation. It avoids the main issue of the single image being too small with a caption, but it does mean any images on their own row fills the width. So, if you five images, four are 25% wide, and then the fifth is 100% on the next row. Not broken, but not my intention.

[John Peters]

I'd try a grid area for the figcaption. Grid areas are placeholders for layout. If the thing isn't there, layout isn't rendered. If it is there it's rendered according to the area defs. Areas can be to assigned to be topmost, below, to the sides there can be any amount of areas. Truly a huge benefit to our layout needs.

[Steven Garrity]

Yeah, I did try a grid area, but I'm not sure how to (or if it is possible to) define a grid area that follows grid items placed implicitly (as there are an arbitrary number of img tags).

Thanks for the reply!

[John Peters]

Ok here's what could work for you work for you Steven;

<div class='grid'>
    <p>Check this out ok</p>
<figure>
<img src="https://www.actsofvolition.com/file/unfurl-the-cusp.jpg" alt="Mug with roll-up-the-rim tab">
</figure>
<figure>
<img src="https://www.actsofvolition.com/file/unfurl-the-cusp.jpg" alt="Mug with roll-up-the-rim tab">
<img src="https://www.actsofvolition.com/file/unfurl-the-cusp.jpg" alt="Mug with roll-up-the-rim tab">
<img src="https://www.actsofvolition.com/file/unfurl-the-cusp.jpg" alt="Mug with roll-up-the-rim tab">
<img src="https://www.actsofvolition.com/file/unfurl-the-cusp.jpg" alt="Mug with roll-up-the-rim tab">
<img src="https://www.actsofvolition.com/file/unfurl-the-cusp.jpg" alt="Mug with roll-up-the-rim tab">
</figure>
<figure>
<img src="https://www.actsofvolition.com/file/unfurl-the-cusp.jpg" alt="Mug with roll-up-the-rim tab">
<figcaption>❌ This &lt;figure&gt; has only one image and a &lt;figcaption&gt;</figcaption>
</figure>


<figure>
<img src="https://www.actsofvolition.com/file/unfurl-the-cusp.jpg" alt="Mug with roll-up-the-rim tab">
<img src="https://www.actsofvolition.com/file/unfurl-the-cusp.jpg" alt="Mug with roll-up-the-rim tab">
<figcaption>❌ This &lt;figure&gt; has two images a and a &lt;figcaption&gt;</figcaption>
</figure>

<figure>
<img src="https://www.actsofvolition.com/file/unfurl-the-cusp.jpg" alt="Mug with roll-up-the-rim tab">
<img src="https://www.actsofvolition.com/file/unfurl-the-cusp.jpg" alt="Mug with roll-up-the-rim tab">
<img src="https://www.actsofvolition.com/file/unfurl-the-cusp.jpg" alt="Mug with roll-up-the-rim tab">
<img src="https://www.actsofvolition.com/file/unfurl-the-cusp.jpg" alt="Mug with roll-up-the-rim tab">
<img src="https://www.actsofvolition.com/file/unfurl-the-cusp.jpg" alt="Mug with roll-up-the-rim tab">
<figcaption>❌ This &lt;figure&gt; has five images and a  &lt;figcaption&gt;</figcaption>
</figure>
</div>

.grid {
  margin-top: 2em;

}
figure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1em, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(1em, 1fr));
  grid-template-areas: 
  'fig fig fig fig fig'
  'cap cap cap cap cap' ;
  margin: 2rem auto; 
  column-gap: 1em;
  padding: 1rem;
  grid-area: fig;
  box-shadow: 0 0 3px gray;
}

figcaption {
  grid-area: cap; 
}

img {
    width: 100%;
    max-width: 12em;
    height: auto;
}

Example rendering

[Steven Garrity]

Thanks John. At this point your verging on doing free consulting work, which I don't want to take advantage of. Feel free to drop out of the conversation knowing you've been helpful.

That said, if you're still interested, or for anyone else following along, I don't think the named grid-area helps in this situation. The goal is for figures with only one or two images to have those images fill the full width.

For example instead of this:

I'm aiming for this: