Вариант №2 макета галереи

by Andrey Dobrovoi

HTML

<div class="wrap">
<div class="item">
<img src="http://dbmast.ru/files/responsive-images-demo/images/image01.jpg">
		<h3>Uhh, that grid</h3>
	</div>
<div class="item">
		<img src="http://www.imgion.com/images/01/white-polar-bear-cub.jpg">
		<h3>Uhh, that grid</h3>
	</div>
<div class="item">
		<img src="http://www.imgion.com/images/01/white-polar-bear-cub.jpg">
		<h3>Uhh, that grid</h3>
	</div>
<div class="item">
		<img src="http://www.imgion.com/images/01/white-polar-bear-cub.jpg">
		<h3>Uhh, that grid</h3>
	</div>
<div class="item">
		<img src="http://www.imgion.com/images/01/white-polar-bear-cub.jpg">
		<h3>Uhh, that grid</h3>
	</div>
<div class="item">
		<img src="http://www.imgion.com/images/01/white-polar-bear-cub.jpg">
		<h3>Uhh, that grid</h3>
	</div>
<div class="item">
		<img src="http://www.imgion.com/images/01/white-polar-bear-cub.jpg">
		<h3>Uhh, that grid</h3>
	</div>
<div class="item">
		<img src="http://www.imgion.com/images/01/white-polar-bear-cub.jpg">
		<h3>Uhh, that grid</h3>
	</div>
<div class="item">
		<img src="http://www.imgion.com/images/01/white-polar-bear-cub.jpg">
		<h3>Uhh, that grid</h3>
	</div>
<div class="item">
		<img src="http://www.imgion.com/images/01/white-polar-bear-cub.jpg">
		<h3>Uhh, that grid</h3>
	</div>
  <div class="item">
		<img src="http://www.imgion.com/images/01/white-polar-bear-cub.jpg">
		<h3>Uhh, that grid</h3>
	</div>
  <div class="item">
		<img src="http://www.imgion.com/images/01/white-polar-bear-cub.jpg">
		<h3>Uhh, that grid</h3>
	</div>
  </div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
  background-color:#666;
    background-image: linear-gradient(-123deg, #2d363d 0%, #677274 20%, #7a8485 28%, #9d9c98 61%, #c3b5a8 100%);
}
.wrap {
   margin: 1em auto;
   padding: 1em 0 1em;
   max-width: 1170px;
}
.item {
  width: 23.5%;
  background: white;
  padding: 5px;
  float: left;
  -webkit-box-shadow: 2px 2px 50px rgba(0,0,0,0.6);
    -moz-box-shadow: 2px 2px 50px rgba(0,0,0,0.6);
    box-shadow: 2px 2px 50px rgba(0,0,0,0.6);
}

.item:nth-child(n) {
  margin-right: 2%;
  margin-bottom: 2%;
}
.item:nth-child(4n) {
  margin-right: 0;
}
@media (max-width: 1000px) {
  .item {
    width: 32%;
  }
  .item:nth-child(n) {
    margin-right: 2%;
    margin-bottom: 2%;
  }
  .item:nth-child(3n) {
    margin-right: 0;
  }
}
@media (max-width: 600px) {
  .item {
    width: 49%;
  }
  .item:nth-child(n) {
    margin-right: 2%;
    margin-bottom: 2%;
  }
  .item:nth-child(2n) {
    margin-right: 0;
  }
}
.item h3 {
  
}
@media (max-width: 480px) {
  .item {
    width: 100%;
  }
  .item:nth-child(n) {
    margin-right: 2%;
    margin-bottom: 2%;
  }
  .item:nth-child(2n) {
    margin-right: 0;
  }
}
.item img {
  max-width: 100%;
}