Images in a flexbox grid

Question

i was trying to create an image grid with flexbox with two columns. In the first column i've placed a single image(600x600px) and in the second column i've placed 4 images (300x300px) 2 for each row.

In the second column there is some space between the images that gives a staggered result. Here is the code that i was testing, how could i remove the white space between the images? Thanks for the help

/* ! Grid System */
.grid { margin: 0 auto; max-width: 1200px; display: flex; flex-flow: row; flex-wrap: nowrap;}
.grid-wrap{flex-wrap: wrap;}
.grid-horizontal{display: flex; flex-flow: row; flex-wrap: nowrap; border: solid 1px yellow; }
.grid--center{justify-content: center;}
.col{ flex: 1;}

[class*='col-'] { position: relative;}

.col-20{ width: 20%; }
.col-25{ width: 25%; }
.col-30{ width: 30%; }
.col-33{ width: 33.33%; }
.col-50{ width: 50%; }
.col-70{ width: 70%; }
.col-80{ width: 80%; }
.col-100{ width: 100%; }

@media (max-width: 991px) {
  .tab-20 { width: 20%; }
  .tab-25 { width: 25%; }
  .tab-33 { width: 33.33%; }
  .tab-50 { width: 50%; }
  .tab-100 { width: 100%; }
}

@media (max-width: 580px) {
  .grid--sma{flex-wrap: wrap;}
  [class*='col-'] { width: 100%;}
  .sma-20 { width: 20%; }
  .sma-25 { width: 25%; }
  .sma-33 { width: 33.33%; }
  .sma-50 { width: 50%; }
  .sma-100 { width: 100%; }

  .sma-hide{display:none}
}

  <div class="container" style="border:solid 1px red; height:auto">
    <div class="grid grid--sma" style="max-height:2600px">
      <div class="col-50 sma-100" style=" border:solid 1px black;">

        <img src="img/Square-big.jpg" alt="" style="width:100%">

      </div>

      <div class="col-50 sma-100" style=" border:solid 1px black;">

        <img src="img/Square-small-1.jpg" alt="" style="width:49%">
        <img src="img/Square-small-2.jpg" alt="" style="width:49%">

        <img src="img/Square-small-2.jpg" alt="" style="width:49%">
        <img src="img/Square-small-1.jpg" alt="" style="width:49%">

      </div>


    </div>

Roman Zino · Answer 1 · 2021-02-12T15:03:14.337

You see the gap between images because by default they are inline elements. All inline elements behave like this.

Fix using Flexbox

Make your images block elements, and create a flexbox grid on a parent element

.col-50 img {
  display: block;
}

.col-50 {
  display: flex;
  flex-wrap: wrap;
}

Once you used flexbox, you can remove style="width:49%" from your HTML code for images and just add the following line to CSS:

.col-50 img {
  ...
  width: 50%;
  ...
}

Images in a flexbox grid

1 Answers1

Fix using Flexbox