Elastic 1:1 grid

A very quick and dirty example of how to create a flexible 1:1 grid

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Elastic 1:1 grid</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .box {
  float: left;
  width: 30%;
  padding-bottom : 30%;
  margin: 1.66%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.img_1-1{background-image: url('https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg');}
.img_1-2{background-image: url('https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg');}
.img_1-3{background-image: url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg');}

.img_2-1{background-image: url('https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg');}
.img_2-2{background-image: url('https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg');}
.img_2-3{background-image: url('https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg');}

.img_3-1{background-image: url('https://farm9.staticflickr.com/8429/7862595906_8f953fd25b.jpg');}
.img_3-2{background-image: url('https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg');}
.img_3-3{background-image: url('https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg');}
    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <div class="box img_1-1"></div>
<div class="box img_1-2"></div>
<div class="box img_1-3"></div>
<div class="box img_2-1"></div>
<div class="box img_2-2"></div>
<div class="box img_2-3"></div>
<div class="box img_3-1"></div>
<div class="box img_3-2"></div>
<div class="box img_3-3"></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.box {
  float: left;
  width: 30%;
  padding-bottom : 30%;
  margin: 1.66%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.img_1-1{background-image: url('https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg');}
.img_1-2{background-image: url('https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg');}
.img_1-3{background-image: url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg');}

.img_2-1{background-image: url('https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg');}
.img_2-2{background-image: url('https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg');}
.img_2-3{background-image: url('https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg');}

.img_3-1{background-image: url('https://farm9.staticflickr.com/8429/7862595906_8f953fd25b.jpg');}
.img_3-2{background-image: url('https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg');}
.img_3-3{background-image: url('https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg');}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Elastic 1:1 grid ) is write by Fredrik Frodlund, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Fredrik Frodlund