Responsive Flexbox Image Grid - html

Question

I am unable to get one of my images to line up correctly. I have done most of the align vertical-align: middle; and display display: block;options to remove the bottom padding. I have also set the container to width: 100%; as well as the image width: 100%; so it should be responsive. I'm not sure what is causing this image to have the gap. I have set the background color to yellow so it shows the area that needs to be filled in. I have also commented out all of the alternative options I attempted with no success.
Example:
* {
box-sizing: border-box;
font-size: 100%;
}
.container {
display: flex;
flex-direction: column;
max-width: 90%;
margin: 0 auto;
background-color: white;
}
.img__container {
display: flex;
/* justify-content: space-between; */
align-content: center;
background: yellow;
}
a .img_item {
width: 100%;
height: auto;
vertical-align: middle;
/* display: block; */
/* flex-grow: 1;
flex-shrink: 0;
flex-basis: auto; */
}
.img_item_1,
.img_item_3,
.img_item_2 {
width: 33.33%;
}
.img_item_4,
.img_item_5 {
width: 50%;
}
.img_item img {
vertical-align: middle;
/* display: block; */
max-width: 100%;
}
<div class="container">
<div class="img__container">
<img src="https://images.unsplash.com/photo-1460626399219-57a00a2361cb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=ea8025ac5c503a77aaf3197534af535b" alt="">
<img src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=65ebb274e22b4db0f6cef789563020c5" alt="">
<img src="https://images.unsplash.com/photo-1453668069544-b8dbea7a0477?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=3693c161a8cf1e3299c913eede08005a" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1428189923803-e9801d464d76?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=467ee7b8a091aa5cb8bc9b496aada853" alt="">
<img src="https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0e8fe82e7f50091319fdc635582bf62d" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=072549d9d9ee6a1f78d91081068c6ad1" alt="">
<img src="https://images.unsplash.com/photo-1433190152045-5a94184895da?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=57115141c5d099ff83a0aa55c0b219a9" alt="">
</div>
</div>

Answer 1

The problem is you're trying to fit images of different width to height ratios into boxes of the same size (I say images because it also appears your first top two images have a 1 pixel gap at the bottom.)
Your options are:
Crop all images to the same size at the CMS end.
or
Attach your images as inline background images and in your CSS file set the background-size to cover and background-position to center center. Some other things you'll need to adjust as well. If you're interested in this approach, let me know in the comments and I can edit my answer with a snippet.
EDIT
Background image (for the sake of brevity I only did the one):
* {
box-sizing: border-box;
font-size: 100%;
}
.container {
display: flex;
flex-direction: column;
max-width: 90%;
margin: 0 auto;
background-color: white;
}
.img__container {
display: flex;
align-content: center;
background: yellow;
}
.img_item {
background-size: cover;
background-position: center center;
}
.img_item_4,
.img_item_5 {
width: 50%;
}
.img_item img {
vertical-align: middle;
max-width: 100%;
}
<div class="container">
<div class="img__container">
<img src="https://images.unsplash.com/photo-1460626399219-57a00a2361cb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=ea8025ac5c503a77aaf3197534af535b" alt="">
<img src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=65ebb274e22b4db0f6cef789563020c5" alt="">
<img src="https://images.unsplash.com/photo-1453668069544-b8dbea7a0477?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=3693c161a8cf1e3299c913eede08005a" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0e8fe82e7f50091319fdc635582bf62d" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=072549d9d9ee6a1f78d91081068c6ad1" alt="">
<img src="https://images.unsplash.com/photo-1433190152045-5a94184895da?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=57115141c5d099ff83a0aa55c0b219a9" alt="">
</div>
</div>
EDIT 2
* {
box-sizing: border-box;
font-size: 100%;
}
.container {
display: flex;
flex-direction: column;
max-width: 90%;
margin: 0 auto;
background-color: white;
}
.img__container {
display: flex;
align-content: center;
background: yellow;
}
.img_item {
background-size: cover;
background-position: center center;
}
.img_item_1,
.img_item_2,
.img_item_3 {
padding-bottom: 22%;
width: 33.333%;
}
.img_item_4,
.img_item_5,
.img_item_6,
.img_item_7 {
padding-bottom: 33.333%;
width: 50%;
}
.img_item img {
vertical-align: middle;
max-width: 100%;
}
<div class="container">
<div class="img__container">
</div>
<div class="img__container">
</div>
<div class="img__container">
</div>
</div>