How to make staggered blocks?

Question

I have css styles that allows make cards and align it in the grid. But I need remove a vertical space between blocks:

Now, I have the next code:

ul.page_card_grid {
 margin: 16px 0 16px 0;
 padding: 0;
 text-align: center;
}

ul.page_card_grid li {
 display: inline-block;
 vertical-align: top;
}

ul.page_card_grid li a {
 display: block;
 color: #555;
 width: 140px;
 margin: 16px;
 padding: 20px 16px 16px 16px;
 font-size: 16px;
 text-decoration: none;
 background-color: #fff;
 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

ul.page_card_grid li a p {
 margin: 8px 0 8px 0;
 font-size: 20px;
 text-align: center;
}

ul.page_card_grid li a img {
 margin: 0 52px 0 22px;
}

ul.page_card_grid li a:hover {
 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

<ul class="page_card_grid">
 <li>
  <a href="http://local/index.php/sample-page/and-one-yet/">
   
   <p>And one yet</p>
   Some text
  </a>
 </li>
 <li>
  <a href="http://local/index.php/sample-page/child-page-1/">
   <img width="96" height="96" src="http://local/wp-content/uploads/2016/05/ic-1-150x150.png" class="attachment-96x96 size-96x96" alt="ic" srcset="http://local/wp-content/uploads/2016/05/ic-1-150x150.png 150w, http://local/wp-content/uploads/2016/05/ic-1.png 256w" sizes="(max-width: 96px) 100vw, 96px" />
   <p>Child page 1</p>
   Some text
  </a>
 </li>
 <li>
  <a href="http://local/index.php/sample-page/child-page-2/">
   
   <p>Child page 2</p>
   Some text
  </a>
 </li>
 <li>
  <a href="http://local/index.php/sample-page/one-yet-page/">
   
   <p>One yet page</p>
   Some text
  </a>
 </li>
</ul>