Responsive Flexbox Image Grid

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">
    <a href="#" class="img_item img_item_1"><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=""></a>
    <a href="#" class="img_item img_item_2"><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=""></a>
    <a href="#" class="img_item img_item_3"><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=""></a>
  </div>
  <div class="img__container">
    <a href="#" class="img_item img_item_4"><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=""></a>
    <a href="#" class="img_item img_item_5"><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=""></a>
  </div>
  <div class="img__container">
    <a href="#" class="img_item img_item_6"><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=""></a>
    <a href="#" class="img_item img_item_7"><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=""></a>
  </div>
</div>

damo-s · Accepted Answer · 2016-05-01T03:02:16.617

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">
    <a href="#" class="img_item img_item_1"><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=""></a>
    <a href="#" class="img_item img_item_2"><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=""></a>
    <a href="#" class="img_item img_item_3"><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=""></a>
  </div>
  <div class="img__container">
    <a href="#" class="img_item img_item_4" style="background-image:url(https://images.unsplash.com/photo-1428189923803-e9801d464d76?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=467ee7b8a091aa5cb8bc9b496aada853);"></a>
    <a href="#" class="img_item img_item_5"><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=""></a>
  </div>
  <div class="img__container">
    <a href="#" class="img_item img_item_6"><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=""></a>
    <a href="#" class="img_item img_item_7"><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=""></a>
  </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">
    <a href="#" class="img_item img_item_1" style="background-image:url(https://images.unsplash.com/photo-1460626399219-57a00a2361cb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=ea8025ac5c503a77aaf3197534af535b);"></a>
    <a href="#" class="img_item img_item_2" style="background-image:url(https://images.unsplash.com/photo-1460400355256-e87506dcec4f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=65ebb274e22b4db0f6cef789563020c5);"></a>
    <a href="#" class="img_item img_item_3" style="background-image:url(https://images.unsplash.com/photo-1453668069544-b8dbea7a0477?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=3693c161a8cf1e3299c913eede08005a);"></a>
  </div>
  <div class="img__container">
    <a href="#" class="img_item img_item_4" style="background-image:url(https://images.unsplash.com/photo-1428189923803-e9801d464d76?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=467ee7b8a091aa5cb8bc9b496aada853);"></a>
    <a href="#" class="img_item img_item_5" style="background-image:url(https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0e8fe82e7f50091319fdc635582bf62d);"></a>
  </div>
  <div class="img__container">
    <a href="#" class="img_item img_item_6" style="background-image:url(https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=072549d9d9ee6a1f78d91081068c6ad1);"></a>
    <a href="#" class="img_item img_item_7" style="background-image:url(https://images.unsplash.com/photo-1433190152045-5a94184895da?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=57115141c5d099ff83a0aa55c0b219a9);"></a>
  </div>
</div>

I did attempt to set the images as background images. I found the result to have a lot of movement when resized. I might be doing it incorrectly, please let me know. I would like for the images to resize as I currently have it. I like how they look when you resize the page. example (background-images): http://codepen.io/vaarellano/pen/vGQOvG?editors=1100 — Victor, Apr 30 '16 at 21:30
Please see my edit :) I don't notice the movement you're referring to. The image has to be cropped, one way or another, in order to fill the space. — damo-s, May 01 '16 at 00:04
Thanks for the edit. When I attempted to update all of the code with the background image and update the CSS for background-size and background-position the images collapsed. How would you fix this, thanks again for your help this has been driving me crazy for the past 6 hours. — Victor, May 01 '16 at 02:09
Ah yes, sorry. Adding a `padding-bottom` (see my second edit) with a percent value (22% for the smaller row of three and 33% or so for the row of two) gets you close to the original example. There's a question and answer somewhere on SO that explains how/why this works. Let me see if I can dig it up. — damo-s, May 01 '16 at 03:06
Here we are: http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css — damo-s, May 01 '16 at 03:12

Responsive Flexbox Image Grid

1 Answers1