Responsive square images

Responsive 3x3 grid of square images. 3 Columns and 3 rows.

by Muhammad Faisal Ashfaq

HTML

<div class="container">
  <!-- 1st row verticaly centered text in the square columns -->

<div class="square img_1-1">
</div>
<div class="square img_1-2">
</div>
<div class="square img_1-3">
</div>

<!-- 2nd row verticaly centered images in square columns -->

<div class="square img_2-1">
</div>
<div class="square img_2-2">
</div>
<div class="square img_2-3">
</div>

<!-- 3rd row responsive images in background with centered content -->

<div class="square img_3-1">
</div>
<div class="square img_3-2">
</div>
<div class="square img_3-3">
</div>

</div>

CSS

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
}

/* img url assigning */

.img_1-1{background-image:url('https://farm9.staticflickr.com/8429/7862595906_8f953fd25b.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');}