Make images on last row the same size as others in flexbox gallery

Question

I'm attempting to build a very simple CSS flex image gallery that shrinks the width of the images depending on the size of the container:

HTML:

<div class="grid-container">
    <div class="grid-item">
        <img src="small-thumb-dpi.jpg" />
        <div>this is the item description</div>
    </div>

    ...(more items here)

</div>

CSS:

.grid-container {
  display: flex;
  flex-flow: row wrap;
}

The problem I have is maybe because I'm using "flex: 1 1 auto;" for the gallery items, like so:

.grid-item {
    flex: 1 1 auto;
    width: 236px;
    margin: .35vw;        
}

The code above creates the flex grid I'm looking for except the images on the last row expand to fill the available space, like:

Here is my code:

body {
  margin: 0;
  padding: 10px;
}
.grid-container {
  display: flex;
  flex-flow: row wrap;
}
.grid-item {
  background-color: lightgray;
  flex: 1 1 auto;
  width: 300px;
  margin: .45vw;
  padding: 10px;
  box-sizing: border-box;
}
.grid-container img {
  width: 100%;
  height: auto;
}

<div class="grid-container">
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
</div>

Codepen

Basically, I need the images on the last row to be the same size as the others while the flex property of the images is maintained. How can I achieve that?

score 0 · Answer 1 · answered Jun 16 '16 at 21:51

Adjust the width of the .grid-item and add margin if you want gutters.

.grid-container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

.grid-item {
  width: 25%;
  padding: 10px;
  box-sizing: border-box;
  background-color: lightgray;
}

zer00ne · Answer 2 · 2016-06-16T22:50:03.103

You can add a little ninja donkey.

On each donkey, set the flex-basis from auto to a tolerable percentage, I chose 25%.
```
flex:1 1 25%
```
Next add an extra donkey and assign visibility: hidden on the ninja donkey.
```
.grid-item:last-of-type {
   visibility: hidden;
}
```

Btw, I changed the divs for each donkey into <figure> and <figcaption> respectively.

CODEPEN

SNIPPET

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    body {
      margin: 0;
      padding: 10px;
      box-sizing: border-box;
    }
    .grid-container {
      display: flex;
      flex-flow: row wrap;
    }
    .grid-item {
      background-color: lightgray;
      flex: 1 1 25%;
      width: 300px;
      margin: .45vw;
      padding: 10px;
    }
    .grid-item:last-of-type {
      visibility: hidden;
    }
    .grid-item img {
      width: 100%;
      height: auto;
    }
    figcaption {
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="grid-container">
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
  </div>
</body>

</html>

Thanks! That almost fixed it; if I add or remove items, then the last one that is not hidden expands again. And If I set the value of the **flex-basis** property to a length like 25%, the items won't "float" if the container grows or shrinks. — Andres, Jun 17 '16 at 20:21

Make images on last row the same size as others in flexbox gallery

2 Answers2

SNIPPET