Adjust width and height of CSS grid boxes based on the number of images

Question

I am creating a CSS grid that displays the photos of the guests in my podcast.

For my particular case, the grid will assume:

There is a minimum of 1 guest
There is a maximum of 4 guests
The photo images are all square (ex 100px x 100px)

The basic structure of the HTML looks like this:

I want the guests to display within a CSS grid container.

Note: I do not want the images to look stretched, so I use object-fit: cover (but that is not the issue, I do not think)

.cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(50%, 100%));
    gap: 2px;
    width: 110px;
    height: 110px;
  }

.card {
  width: 100%;
  object-fit: cover;
}

The rules I want to set are as follows:

For 4 guests, display 4 boxes with 2 rows and 2 columns. This works!
For 3 guests, display 3 boxes with 2 rows and 2 columns and do not stretch the guest across the entire second row. This works!
For 2 guests, display 1 row and 2 columns at a 50% width for each image. This does not work :-(
For 1 guest, display 1 row and 1 column at 100% width for the full image. This does not work :-(

As you can see in the screenshot, The grid does not display as I would hope for 2 guests or 1 guest.

Perhaps CSS Grid is the wrong choice or maybe I am missing something?

Ideally, I do not want to use JavaScript, but scss mixins would be okay (which may be a choice here?), but I would like to know if I can do this purely with CSS Grid or maybe Flexbox(?). If it helps any, I am using Jekyll with the Liquid language.

Is there a way I can create a CSS Grid that properly displays the photos so they are the correct size based on the number of images displayed?

user_11389581 · Answer

Give the nested images inside your .cards grid a height: 100% declaration so they occupy 100% of each grid items height. To handle the scenario when there is only a single element without any siblings inside the grid, you could use the :only-child pseudo class to target the .card which doesn't have any siblings. Then make it occupy both of the columns with grid-column: -1 / 1. This way the single image will span both columns occupying the original 110px width of your two column grid.

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(50%, 1fr));
  gap: 2px;
  width: 110px;
  height: 110px;
  border: 2px solid #000;
  margin: 1rem 0;
}

.cards .card:only-child {
  grid-column: -1 / 1;
}

.card {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

user_13601941 · Answer

This should work for what you are asking for, You can add or remove the img src to get the different results.

html

Css

.cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(50%, 100%));
    gap: 2px;
    width: 300px;
    height: 110px;
  }

.card {
  width: 100%;
  object-fit: cover;
}

/* one item */
img:first-child:nth-last-child(1) {
/* -or- li:only-child { */
  width: 300px;
  height: 300px
}

/* two items */
img:first-child:nth-last-child(2),
img:first-child:nth-last-child(2) ~ img {
  width: 150px;
  height: 300px;
}

/* three items */
img:first-child:nth-last-child(3),
img:first-child:nth-last-child(3) ~ img {
    
}

/* four items */
img:first-child:nth-last-child(4),
img:first-child:nth-last-child(4) ~ img {
    
}

You can change the nth element in the way you want them to display. If you change the width and height to % it will take the % of the image. That's why I added the width and height in pixels according to the grid size. I'm not sure how to use the grid width and height as a % there. (There's probably a way to do that too. I'll add it if I find a way).

But everything else should work.

user_10179415 · Answer

Nevertheless, it will be optimal for your task to use "display: flex". The blocks will themselves be arranged in the correct order. If the block is both the first and the last child (that is, the only one), then the block is stretched to fit the parent. I would do it like this:

.cards {
  display: flex;
  flex-flow: row wrap;
  gap: 4px; padding: 8px;
  height: 150px; width: 150px;
  box-shadow: -1px -2px 2px -1px #0004, inset 1px 2px 5px 0px #0004;
}

.card {
  width: calc((100% - 4px) / 2);
  height: calc((100% - 4px) / 2);
  object-fit: cover;
  box-shadow: 0 1px 3px #000;
}
.card:first-of-type:last-of-type {
  height: 100%; width: 100%;
}

body { margin: 0; min-height: 100vh; display: flex; justify-content: space-evenly; align-items: center; }

If you need two blocks to have 100% height, then add one more rule:

.cards {
  display: flex;
  flex-flow: row wrap;
  gap: 4px; padding: 8px;
  height: 150px; width: 150px;
  box-shadow: -1px -2px 2px -1px #0004, inset 1px 2px 5px 0px #0004;
}

.card {
  width: calc((100% - 4px) / 2);
  height: calc((100% - 4px) / 2);
  object-fit: cover;
  box-shadow: 0 1px 3px #000;
}
.card:first-of-type:last-of-type {
  height: 100%; width: 100%;
} 
.card:nth-last-of-type(2):first-of-type,
.card:nth-of-type(2):last-of-type {
  height: 100%;
}

body { margin: 0; min-height: 100vh; display: flex; justify-content: space-evenly; align-items: center; }

Adjust width and height of CSS grid boxes based on the number of images

3 Answers