Make a grid of inline-block elements respond to resize - html

Question

I'm currently working on the following website:
http://hmdesign.alpheca.uberspace.de/
As you can see, I already managed to create a list of div.project-item elements. Due to the use of inline-blocks, it also reduces the number of columns when you resize the window. What I want to accomplish now is, when you resize the window, that the elements scale up/down in a certain range (between min-width and max-width) until it reaches the maximum/minimum and that it THEN removes/creates a column. The problem now is that there is a huge empty gap after removing a column. It would be much smarter to still show lets say 3 smaller columns in that situation instead of 2 big ones.
I already tried to use a flexbox which didn't really help and also to use block elements instead of inline-block and float them to the left. Then the resizing works but I also want the whole thing to be centered (like now), which I didn't found a way yet to do with floated elements.
Relevant code below:
HTML:
<div class="content-wrapper">
<div class="project-list">
<div class="project-item">
<a href="#">
<img class="project-image" src="res/img/Placeholder.jpg">
<div class="project-overlay">
<div class="project-desc">
<span class="project-title"></span>
<span class="project-text"></span>
</div>
</div>
</a>
</div>
<div class="project-item"...
CSS:
/* Wrapper */
div.nav-wrapper, div.content-wrapper {
max-width: 1280px;
padding: 0 25px;
position: relative;
margin: 0 auto;
height: 100%;
}
/* Portfolio Projektliste */
div.project-list {
padding-top: 150px;
max-width: 1300px;
margin: 0 10px;
text-align: center;
font-size: 0;
}
/* Projekt Item */
div.project-item {
display: inline-block;
position: relative;
width: 400px;
height: auto;
margin: 10px;
overflow: hidden;
}
div.project-item:after {
padding-top: 56.25%;
/* 16:9 ratio */
display: block;
content: '';
}
img.project-image {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
max-width: 100%;
}
div.project-overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
background-color: black;
opacity: 0;
}

Answer 1

You can set the width of div.project-item in % instead of a fixed width (px)
e.g
div.project-item{
width: 30%;
}
So when you resize the window it will adjust.
And if in some point you want to show only two, you can do it using medias
e.g
#media (max-width: 920px){
div.project-item{
width: 45%;
}
}

Answer 2

I agree with Yandy.
Try changing your div.project-item width to like 40% (this is for when it has two divs showing). Like so:
div.project-item {
display: inline-block;
position: relative;
width: 40%;
height: auto;
margin: 10px;
overflow: hidden;
}
Then add this code:
#media only screen and (min-width: 1347px) {
div.project-item {
width:31%
}
}
#media only screen and (max-width: 926px) {
div.project-item {
width:75%
}
}
All of the width percentages can be picked to your choosing for your project.
The one with the 926px is for the single div, and the 1347px is for the triple div.