如何制作交错的积木？

Question

我有css样式，允许制作卡片并将其对齐在网格中。但我需要删除块之间的垂直空间：

现在，我有下一个代码：

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>