(CSS) Grid Box layout with dynamic sizing images

Question

I'm trying to create a tile layout / grid box layout with dynamic sizing images. The Idea is to create this: https://i.stack.imgur.com/T2T4L.jpg

But the size of the box needs to change depending on the width or height of the browser. Even better would be when the boxes also get less per row if the browser is too short in width. A full row of boxes/images should always be the full width of the page. And each image is square.

Someone created this http://codepen.io/davidkpiano/pen/EaxjBj

With SASS, but I have no clue how to work with SASS but thought it could be achieved without SASS.

This is what I was playing around with but I never got It really working

.img_left {
        float: left;
        padding-bottom: 500px;

}

.img_left img {
       width: 19.82vw;
       height: 19.82vw;
}

.img_work img {
        width: 19.82vw;
        height: 19.82vw;
        float: left;
 }

.img_left is my div for the very first picture. Is there a good solution to my problem?

Answer 1

The codepen script you posted is realy simple. Let me "decode" Sass for you, it might be what you looking for:

* {
  box-sizing: border-box;
  position: relative;
}

.tile {
    float:left;
    width: 25%;
    padding: 25% 0 0 0;
    height: 0;
    overflow: hidden;
    transition: 0.3s all ease-in-out;
}
.tile > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
// Make sure rows are flush
.tile:nth-child(4n + 1) {
    clear: left;
}

// Small screens
@media (max-width: 768px) {
    .tile {
        width: 50%;
        padding: 50% 0 0 0;
    }
        .tile:nth-child(2n + 1) {
        clear: left;
    }
}

Answer 2

Here is a good SASS to CSS converter for you to use in the future. At least until you become more familar with SASS.

http://sassmeister.com/