Elastic 1:1 grid

In this example below you will see how to do a Elastic 1:1 grid with some HTML / CSS and Javascript

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

Thumbnail
This awesome code was written by frippz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright frippz ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<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/frippz/elastic-11-grid-aBAqD */
.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');}

Comments