How to do a tumblr like grid in HTML/CSS - html

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"> <img class="filterDiv picture" src="images/ego5-4.jpg" alt="ego graphique" style="width:40% "> <img class="filterDiv imprime" src="images/ihp1_1.jpg" alt="affiches pour l'institut henri poincaré" style="width:25%"> <img class="filterDiv imprime" src="images/jpogat17.png" alt="portes ouvertes lycée du gué à tresmes 2017" style="width:25%"><img class="filterDiv imprime" src="images/detailbook1.jpg" style="width:35%"> <img class="expav filterDiv digital" src="images/expavstatic.png" alt="expérience de la durée" style="width:35%" ></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

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/

Answer 2

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; */
}