Vertical spacing on a grid layout.

Hoping for some help on a grid layout I’m doing. Trying to get my posts to grid out. Made a child, copied content.php and renamed it content-mainpage.php. Then I edited index.php to go to content-mainpage.php instead of content.php. (Did this so individual posts won’t display at 33%) Put in a div as in

<div class="mainpage">
		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
-------------------------------------------------------------
		</article><!-- #post -->
	</div>

and used this css.

.mainpage {
	width: 33%;
	display: inline-block;
	vertical-align: top;
}

Works fine, posts grid out on the main page except for one thing. No matter what I try every post displayed in a row takes on the height of the tallest one. I can get the post to align at the top or bottom but I can’t get them to stack tight against each other vertically.

Researched it with little result. Does anyone out there have any ideals? I know I’ve seen it done before. In fact the “visual” theme does but I can’t figure out how.