<h1>Pure CSS Grid like Masonry plugin</h1>

<div class="container">

<div class="grid">
  <div class="item">
    <img src="http://renatagmartins.com.br/wp-content/uploads/2017/02/MG_4203t-1.jpg" alt="">
  </div>
  <div class="item">
    <img src="http://renatagmartins.com.br/wp-content/uploads/2017/02/MG_2761-1.jpg" alt="">
  </div>
  
  <div class="item">
    <img src="http://renatagmartins.com.br/wp-content/uploads/2017/02/MG_2932-1.jpg" alt="">
  </div>
  <div class="item">
    <img src="http://renatagmartins.com.br/wp-content/uploads/2017/02/MG_4203t-1.jpg" alt="">
  </div>
  <div class="item">
    <img src="http://renatagmartins.com.br/wp-content/uploads/2017/02/MG_3898.jpg" alt="">
  </div>
  <div class="item">
    <img src="http://renatagmartins.com.br/wp-content/uploads/2017/02/MG_4132-1.jpg" alt="">
  </div>
   <div class="item">
    <img src="http://renatagmartins.com.br/wp-content/uploads/2017/02/MG_4132-1.jpg" alt="">
  </div>
   <div class="item">
    <img src="http://renatagmartins.com.br/wp-content/uploads/2017/02/MG_4132-1.jpg" alt="">
  </div>
   <div class="item">
    <img src="http://renatagmartins.com.br/wp-content/uploads/2017/02/MG_2975-1.jpg" alt="">
  </div>
</div>
</div>
/* ============================================================================================== 
Renata G Martins
http://www.renatagmartins.com.br
================================================================================================= */

h1{
  font-family: Vernada;
  font-size:36px;
  margin-bottom:30px;
}
.container{
  width:100%;
  text-align:center;
}
.grid{
 -moz-column-width: 20em;
 -webkit-column-width: 13em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em; 
	display: inline-block;
	width: 90%;
}
.item{
	width: 100%;
  margin:10px;
  display:inline-block;
}
.item img{
	width: 100%;
  display:inline-block;
  margin:10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.