Grid Styling: Filling in white space

Question

Creates 4x4 grid:

.grid div img {
    width: 100%;
    object-fit: contain;
}

.grid {
    width: 90%;
    margin: auto auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-start: auto;
    grid-gap:.7em;
}

HTML & CSS Code: https://codepen.io/ikenna-porter/pen/PKpyJB/?editors=1100

Is it possible to get rid of the extra white space between each row (for example: the large gap between the image with the birds and the image with the US flag/missiles). I would like to have each row automatically fill in spaces left behind from the previous row, so that each row of images aren't perfectly aligned.

Thank you!

score 0 · Answer 1 · answered Aug 08 '17 at 16:48

As far as I know, grid styling makes rows as big as the highest element (but I have not used this tehnique to much). You can make columns and there inserts your images.

https://codepen.io/Czeran/pen/MvpLOW?editors=1100

HTML

<div class="grid">
<div class="column">
  <img src="https://s2.postimg.org/9w8gabqzd/seuss_America_First.jpg">
  <img src="https://s2.postimg.org/4tvpta72x/charlieHebdoTrump.jpg">
</div>
<div class="column">
  <img src="https://s2.postimg.org/si6mate8p/coke_Human_Rights.png">
  <img src="https://s2.postimg.org/fs6zbgvo9/white_House_Leaks.jpg">
</div>
<div class="column">
   <img src="https://s2.postimg.org/tbj83fk9l/our_Mother_Europe.jpg">
   <img src="https://s2.postimg.org/62jlewz15/space_Militarization.jpg">
</div>
<div class="column">
  <img src="https://s2.postimg.org/vhdixxnq1/pet_To_Suffragette.jpg">
  <img src="https://s2.postimg.org/wow23w389/seuss_Mental_Insecticide.jpg">
</div>

CSS

.grid {
width: 100%;
}

.column {
  float: left;
  width: 25%;
}

img {
  max-width: 90%;
}

Grid Styling: Filling in white space

1 Answers1