I'm working on creating a CSS flex image gallery that adjusts the width of the images based on the container size:
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 issue arises because I'm using "flex: 1 1 auto;" for the gallery items, like this:
.grid-item {
flex: 1 1 auto;
width: 236px;
margin: .35vw;
}
The current code creates the desired flex grid layout, but the images on the last row expand to fill the available space as shown in the example below:
https://i.sstatic.net/eLGME.jpg
My code snippet:
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>In summary, I am looking to keep the images on the last row the same size as the others while maintaining the flex properties. How can I achieve this?