How to do a tumblr like grid in HTML/CSS

Question

After spending all day long trying to found how to make a nice tumblr-like grid for my website, I'm posting here to find help. here's the page: http://alexis.gargaloni.free.fr/main.html In order to access to my project there's a grid of images displayed. At the moment it looks OK, but now that I need to add something new, it starts to look really bad. screenshot As you can see, there's a white gap. I've tried many things and there's every time a gap (even when it's not supposed to be there). Here's an example of what I want to achieve: http://alexgargaloni.tumblr.com

here's my HTML code (included filter):

    <div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> TOUT</button>
  <button class="btn" onclick="filterSelection('imprime')"> IMPRIMÉ</button>
  <button class="btn" onclick="filterSelection('digital')"> NUMERIQUE</button>
  <button class="btn" onclick="filterSelection('picture')"> PHOTO</button>
</div>
<div class="pic"> <a href="ego_graphique.html"><img class="filterDiv picture" src="images/ego5-4.jpg" alt="ego graphique" style="width:40% "> </a> <a href="institut_poincare.html"><img class="filterDiv imprime" src="images/ihp1_1.jpg" alt="affiches pour l'institut henri poincaré" style="width:25%"> </a> <a href="jpo_gat_17.html"><img class="filterDiv imprime" src="images/jpogat17.png" alt="portes ouvertes lycée du gué à tresmes 2017" style="width:25%"></a><a href="details_et_des_tailles.html"><img class="filterDiv imprime" src="images/detailbook1.jpg" style="width:35%"></a> <a href="experience_de_la_duree.html"><img class="expav filterDiv digital" src="images/expavstatic.png" alt="expérience de la durée" style="width:35%" ></a></div>

and CSS:

html {
    position: relative;
    min-height: 100%;

}

body {
background: white;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
line-height: 25px;
margin: 0 0 900px; /* bottom = footer height */
padding: 25px;
}

    .img{

    margin: 20px;
}

/* FILTER */    
.container {
    overflow: hidden;
}

.filterDiv {
    float:left;
    /*color: #ffffff;*/
    width: 100px;
    line-height: 100px;
    text-align: center;
    margin: 13px;
    display:none; /* Hidden by default */

}

.show {
    display: block;

}
.pic
{

      max-width: 100%;
}

I'm new to HTML and CSS, and I know that my code is not a 100% clean and it could be way more simplified, but I'm working on it. Excuse my English, I'm French

Thank for your help!

EDIT @ben_fluleck

Thank you. There's a problem with “height: 100%”, because it modifies the aspect ratio of my pic. If I change height and width with max-width and max-height, the white gap is back. I also need to keep “display: none” on. filterDiv to make the filter function work (something with javascript). And also I'm having a problem with filter now, it still works, but pics are not getting how they're supposed to (before: picture after: picture , it's like elements filtered create a white space instead of disappearing). I've tried to do something with the tumblr html, but it didn't seem to work. Simple things are super tricky to do… I really need something that trick the size itself like tumblr theme, because when I'll ad new things on my website, I feel like it's going to be a mess again. Yes, my footer is not really well implemented, I've checked online a way to make it because it's really tricky, and how I did was the only way I was able to make it work. Thank a lot for you help! We can see the footer later, for the moment I really need to focus on this grid

Answer 1

Try these CSS Layouts they will get your pics in order

Flexbox or Grid

set a viewport height in the body and work of that

body{
background: white;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
line-height: 25px;
/* margin: 0 0 900px; */
padding: 25px;
height: 100vh;
display: flex;
flex-direction: column;
}

.pic {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 10px;
}

.filterDiv {
float: left;
width: 100%;
line-height: 100px;
text-align: center;
height: 100%; /*optional if you want them to be all the same same */
}

.show {
/* display: block; */
}

Answer 2

I've tried Flexbox, and I struggle with size.

By myself here's what I get (defining style="width: 400px;" ):

Then I've tried your code:

Still your code but without the width defined to 400px :

So there's still the problem of white gap, while it's supposed to fit, and Size is not auto.

Answer 3

Sorry, the picture in my Css above should be pic since you have named them you can constrain the pics giving them a width property. I would remove the inline styling for width and use percentages in the Css.

I have constructed a fiddle you could expand upon but it should give you a better idea of the layout.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  }

.box {
  flex: 1 1 auto;
  color: white;
  font-size: 50px;
  text-align: center;
  padding: 10px;
}

/* Colours for each box */

.box1 {
  background: #1abc9c;
}

.box2 {
  background: #3498db;
}

.box3 {
  background: #9b59b6;
}

https://jsfiddle.net/sLjuLjoc/1/