Grid elements do not align properly - html

Question

I have a wordpress website (you can see the problem at duncanhill.com.au)
And if you look at the website, the first 3 property boxes align properly, however the 4th and 5th do some weird stuff.
The code looks like this:
HTML:
<div id="grid-gallery" class="grid-gallery">
<section class="grid-wrap">
<ul class="grid">
<li class="grid-sizer"></li><!-- for Masonry column width -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>">
<li>
<figure>
<div class="figimg"><?php the_post_thumbnail(); ?></div>
<figcaption><h3 class="figtitle"><?php the_title(); ?></h3><p class="price"><?php the_subtitle(); ?></p><p class="figdesc"><?php the_excerpt(); ?></p></figcaption>
</figure>
</li>
</a>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</ul>
</section><!-- // grid-wrap -->
CSS:
/* General style */
.grid-gallery ul {
list-style: none;
margin: 0;
padding: 0;
}
.grid-gallery figure {
margin: 0;
}
.grid-gallery figure img/*.figimg*/ {
display: block;
/*width: 100%;
height: 100%;*/
/*height: 210px;*/
border-top-right-radius: 5px;
border-top-left-radius:5px;
}
.grid-gallery figcaption h3 {
margin: 0;
padding: 0 0 0.5em;
}
.grid-gallery figcaption p {
margin: 0;
}
/* Grid style */
.grid-wrap {
max-width: 69em;
margin: 0 auto;
padding: 0 1em 1.875em;
}
.grid {
margin: 0 auto;
}
.grid li {
width: 33%;
float: left;
cursor: pointer;
}
.grid figure {
padding: 15px;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.grid li:hover figure {
opacity: 0.7;
}
.grid figcaption {
font-family: 'lato';
font-weight: 300;
color: #000000;
padding: 25px;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-width: 2px;
border-color: #4B91F0;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.figtitle{
font-family: 'lato';
font-weight: 400;
}
.figdesc{
}
.price{
font-weight: 400;
color: #E74C3C;
}
I really can't work out how to fix it!
Any help with aligning the boxes would be greatly appreciated!
Thanks,
Tom

Answer 1

There are two things you need to do to fix this issue, the first one having to do with the HTML you posted.
First, change your HTML code above so that the empty list item with the class of 'grid-sizer' is removed and your anchor tags within your loop are contained within the list items. It should look like this instead of what you currently have:
<div id="grid-gallery" class="grid-gallery">
<section class="grid-wrap">
<ul class="grid">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<figure>
<div class="figimg"><?php the_post_thumbnail(); ?></div>
<figcaption><h3 class="figtitle"><?php the_title(); ?></h3><p class="price"><?php the_subtitle(); ?></p><p class="figdesc"><?php the_excerpt(); ?></p></figcaption>
</figure>
</a>
</li>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</ul>
</section><!-- // grid-wrap -->
Second, add the following style to your css:
.grid :nth-child(3n+1) {
clear: left;
}