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

#cssgrid #css #codepen #help

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.

Top comments (5)

Steven Garrity • Jun 28 '20

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 • Jun 28 '20

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 • Jun 28 '20 • Edited

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 • Jun 30 '20 • Edited

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 • Jun 30 '20

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:

DEV Community

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

Top comments (5)

Read next

Using JavaScript to implement a text zoom-in animation.

How I reduced Tailwind CSS Home Page's HTML size by 28.5%, CSS by 23.7% and JS by 8.4%

CSS Tools for Enhanced Web Design

Do you need a Tooltip or a Speech Bubble? I have created 100 using CSS 😲