Retaining Aspect Ratio on DIVs with Fixed Gutter and Parent Padding - html

Question

Haven't asked something here in a long time. I'm trying to build my design portfolio, and since I'm not really a front-end developer I lack a lot of knowledge, but that's why I'm here :)
I've got a container which is a DIV with a given padding. Inside I'll have a grid consisting of fluid-width cards. What would be the best option, or how to proceed towards that, for retaining the card aspect ratio (square) and the gutter between cards when resizing the parent element?
Simply put, I'm looking for something like the attached image:
So no matter the screen size, the gutter and padding will stay the same while the cards change their width to fill up the space.
I'm looking for something as CSS-pure as possible. Where should I look?
Thank you!

Answer 1

I am not sure if i got it right. Nenad's solution seems to be good. But i understood that the cards always stay 3 in a row doesn't matter how big or small the screen is (if this makes sense on every screen is another question now). I made you a fiddle in which you don't have to use pictures, you just have to include a little bit of JQuery Code, it's not much.
var divWidth = $('.square').width();
$('.square').height(divWidth);
Please see my fiddle here: https://jsfiddle.net/ee128fy2/
It would be no problem editing this for smaller screens to not have 3 squares in a row.
Note that the square height will not change when you resize your browser window, it will change on pageload. But anyway, i think no one will resize the window when looking on it on mobile phone or something.
Edit:
If you use pictures instead of jquery, resize will work live when scaling the browser window.

Answer 2

You can do this using boostrap https://jsfiddle.net/2Lzo9vfc/60/
HTML
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
</div>
</div>
CSS
.portfolio-item {
margin: 20px 0;
}
#media(max-width: 768px) {
.portfolio-item {
margin: 20px auto;
width: 100%;
text-align: center;
}
.portfolio-item img{
margin: 0 auto;
}
}