responsive gallery css only

by Susan Delgado

HTML

<div class="page">
    <header>This is my header</header>
    <div class="img-grid">
        
        <div class="img-wrapper img-wrapper1">
            <div class="img-container">
                <img src="http://lorempixel.com/400/400/" alt="responsive image" />
            </div>
        </div>
        <div class="img-wrapper img-wrapper2">
            <div class="img-container">
                <img src="http://lorempixel.com/400/400/" alt="responsive image" />
            </div>
        </div>
        <div class="img-wrapper img-wrapper3">
            <div class="img-container">
                <img src="http://lorempixel.com/400/400/" alt="responsive image" />
            </div>
        </div>
        <div class="img-wrapper img-wrapper4">
            <div class="img-container">
                <img src="http://lorempixel.com/400/400/" alt="responsive image" />
            </div>
        </div>
        
    </div><!-- img-grid -->
    <footer>This is my footer</footer>
</div><!-- page -->

CSS

.page {
    width:90%;
}
header {
    width: 100%;
    height: auto;
    background-color: yellow;
    color: #5f5f5f;
    padding-top: 30px;
    padding-bottom: 30px;
}
footer {
    width: 100%;
    height: auto;
    background-color: yellow;
    color: #5f5f5f;
    padding-top: 30px;
    padding-bottom: 30px;
    float:left;
    margin-top:.5%;
}
.img-grid {
    width:100%;
    margin:0 auto;
    margin-top:.5%;
}
.img-wrapper1 {
    display:inline-block;
    width:50%;
    position:relative;
    float:left;
}
.img-wrapper {
    display:inline-block;
    width:50%;
    position:relative;
    float:left;
}
.img-wrapper .img-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
img {
	width:100%;
}
.img-wrapper:after {
	content:"";
	padding-top:100%;
	display:block;
}
.img-wrapper {
	width: 49.75%;
 }
.img-wrapper2 {
	margin-left:.5%;
}
.img-wrapper3 {
	margin-top:.5%;
}
.img-wrapper4 {
	margin-top:.5%;
	margin-left:.5%;
}
/*
.img-wrapper1 .img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.img-wrapper2 {
    display:inline-block;
    width:50%;
    position:relative;
    float:left;
}
.img-wrapper2 .img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.img-wrapper3 {
    display:inline-block;
    width:50%;
    position:relative;
    float:left;
}
.img-wrapper3 .img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.img-wrapper4 {
    display:inline-block;
    width:50%;
    position:relative;
    float:left;
}
.img-wrapper4 .img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
img {
    width:100%;
}
.img-wrapper:after {
    content:"";
    padding-top:100%;
    display:block;
}
*/
/*Extra step*/
/*
 .img-wrapper {
    width: 49.75%;
}
.img-wrapper2 {
    margin-left:.5%;
}
.img-wrapper3 {
    margin-top:.5%;
}
.img-wrapper4 {
    margin-top:.5%;
   ...