CSS columns floating blocks right - html

Question

I have a block grid that I am using CSS columns with to try and create a masonry effect. I've achieved that so far, however the last block item always seems to float to the right.
What I have done so far is
1) on the block grid container set
.blog-grid {
width: 100%;
overflow: hidden;
margin-bottom: rem-calc(20);
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 30px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 30px;
column-fill: auto;
}
2) and on the block
.blog-item {
-webkit-column-break-inside:
-moz-column-break-inside:
column-break-inside: avoid;
}
3) Here is the PHP/HTML
<section class="blog-grid">
<div class="blog-item no-custom-style">
<article class="border half-orange">
<a href="http://yesplus.al.home.dev/news/rvc-management-committee/">
<img src="" alt="RVC Management Committee">
</a>
<div class="content">
<h3 class="orange">RVC Management Committee</h3>
<h3 class="orange">17-09-2015</h3>
<p>In February 2015, our CEO, Graham Godden was privileged to be invited to become a Surrey School Governor and join… read post</p>
<h3 class="orange">Read more ></h3>
</div>
</article>
</div>
<div class="blog-item no-custom-style">
<article class="border half-teal">
<a href="http://yesplus.al.home.dev/news/international-association-of-women-police-conference-cardiff/">
<img src="" alt="International Association of Women Police Conference, Cardiff">
</a>
<div class="content">
<h3 class="teal">International Association of Women Police Conference, Cardiff</h3>
<h3 class="teal">17-09-2015</h3>
<p>On Monday 24th August, Yes+ Trustee, Jackie Malton, CEO Graham Godden and Senior Practitioner, Marticka Sampson, were delighted to present… read post</p>
<h3 class="teal">Read more ></h3>
</div>
</article>
</div>
<div class="blog-item no-custom-style">
<article class="border half-red">
<a href="http://yesplus.al.home.dev/news/yes-team-building-day/">
<img src="" alt="Yes+ Team Building Day">
</a>
<div class="content">
<h3 class="red">Yes+ Team Building Day</h3>
<h3 class="red">17-09-2015</h3>
<p>Our first Staff Team Building Day took place on 29th July. The aim of the day was to improve morale… read post</p>
<h3 class="red">Read more ></h3>
</div>
</article>
</div>
<div class="blog-item no-custom-style">
<article class="border half-yellow">
<a href="http://yesplus.al.home.dev/news/mcgrath-support-for-yes/">
<img src="" alt="McGrath Support for Yes+">
</a>
<div class="content">
<h3 class="yellow">McGrath Support for Yes+</h3>
<h3 class="yellow">17-09-2015</h3>
<p>Yes+ have been selected from over 150 charities to receive a support package from leading philanthropists Harvey and Allison McGrath.… read post</p>
<h3 class="yellow">Read more ></h3>
</div>
</article>
</div>
</section>

Answer 1

Here's the flexbox approach with your HTML structure, but new CSS:
HTML
<section class="blog-grid">
<div class="blog-item no-custom-style">
<article class="border half-orange"> <a href="http://yesplus.al.home.dev/news/rvc-management-committee/">
<img src="" alt="RVC Management Committee">
</a>
<div class="content"> <h3 class="orange">RVC Management Committee</h3>
<h3 class="orange">17-09-2015</h3>
<p>In February 2015, our CEO, Graham Godden was privileged to be invited to become a Surrey School Governor and join… read post
</p> <h3 class="orange">Read more ></h3>
</div>
</article>
</div>
<div class="blog-item no-custom-style">
<article class="border half-teal"> <a href="http://yesplus.al.home.dev/news/international-association-of-women-police-conference-cardiff/">
<img src="" alt="International Association of Women Police Conference, Cardiff">
</a>
<div class="content"> <h3 class="teal">International Association of Women Police Conference, Cardiff</h3>
<h3 class="teal">17-09-2015</h3>
<p>On Monday 24th August, Yes+ Trustee, Jackie Malton, CEO Graham Godden and Senior Practitioner, Marticka Sampson, were delighted to present… read post
</p> <h3 class="teal">Read more ></h3>
</div>
</article>
</div>
<div class="blog-item no-custom-style">
<article class="border half-red"> <a href="http://yesplus.al.home.dev/news/yes-team-building-day/">
<img src="" alt="Yes+ Team Building Day">
</a>
<div class="content"> <h3 class="red">Yes+ Team Building Day</h3>
<h3 class="red">17-09-2015</h3>
<p>Our first Staff Team Building Day took place on 29th July. The aim of the day was to improve morale… read post
</p> <h3 class="red">Read more ></h3>
</div>
</article>
</div>
<div class="blog-item no-custom-style">
<article class="border half-yellow"> <a href="http://yesplus.al.home.dev/news/mcgrath-support-for-yes/">
<img src="" alt="McGrath Support for Yes+">
</a>
<div class="content"> <h3 class="yellow">McGrath Support for Yes+</h3>
<h3 class="yellow">17-09-2015</h3>
<p>Yes+ have been selected from over 150 charities to receive a support package from leading philanthropists Harvey and Allison McGrath.… read post
</p> <h3 class="yellow">Read more ></h3>
</div>
</article>
</div>
</section>
CSS
.blog-grid {
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:flex-start;
align-content:flex-start;
}
.blog-item {
flex:1 0 33.3333%;
padding:25px;
box-sizing:border-box;
}
Fiddle
http://jsfiddle.net/08vp50fL/
This will give you a pseudo masonry affect and keeps content left aligned once the wrap occurs. Hopefully this helps you out.