title: CSS columns floating blocks right
body: <p>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.</p>
  
  <p>What I have done so far is
  1) on the block grid container set </p>
  
  <pre><code>.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;
    }
  </code></pre>
  
  <p>2) and on the block </p>
  
  <pre><code>.blog-item {
      -webkit-column-break-inside: 
      -moz-column-break-inside: 
      column-break-inside: avoid;
  }
  </code></pre>
  
  <p>3) Here is the PHP/HTML</p>
  
  <pre><code>&lt;section class="blog-grid"&gt;
                      &lt;div class="blog-item no-custom-style"&gt; 
                  &lt;article class="border half-orange"&gt;
                      &lt;a href="http://yesplus.al.home.dev/news/rvc-management-committee/"&gt;
                                                  &lt;img src="" alt="RVC Management Committee"&gt;
                      &lt;/a&gt;
  
                      &lt;div class="content"&gt;
                          &lt;a href="http://yesplus.al.home.dev/news/rvc-management-committee/"&gt;&lt;h3 class="orange"&gt;RVC Management Committee&lt;/h3&gt;&lt;/a&gt;
  
                          &lt;h3 class="orange"&gt;17-09-2015&lt;/h3&gt;
  
                          &lt;p&gt;In February 2015, our CEO, Graham Godden was privileged to be invited to become a Surrey School Governor and join… &lt;a href="http://yesplus.al.home.dev/news/rvc-management-committee/"&gt;read post&lt;/a&gt;&lt;/p&gt;
  
                          &lt;a href="http://yesplus.al.home.dev/news/rvc-management-committee/"&gt;&lt;h3 class="orange"&gt;Read more &amp;gt;&lt;/h3&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/article&gt;
              &lt;/div&gt;
                      &lt;div class="blog-item no-custom-style"&gt; 
                  &lt;article class="border half-teal"&gt;
                      &lt;a href="http://yesplus.al.home.dev/news/international-association-of-women-police-conference-cardiff/"&gt;
                                                  &lt;img src="" alt="International Association of Women Police Conference, Cardiff"&gt;
                      &lt;/a&gt;
  
                      &lt;div class="content"&gt;
                          &lt;a href="http://yesplus.al.home.dev/news/international-association-of-women-police-conference-cardiff/"&gt;&lt;h3 class="teal"&gt;International Association of Women Police Conference, Cardiff&lt;/h3&gt;&lt;/a&gt;
  
                          &lt;h3 class="teal"&gt;17-09-2015&lt;/h3&gt;
  
                          &lt;p&gt;On Monday 24th August, Yes+ Trustee, Jackie Malton, CEO Graham Godden and Senior Practitioner, Marticka Sampson, were delighted to present… &lt;a href="http://yesplus.al.home.dev/news/international-association-of-women-police-conference-cardiff/"&gt;read post&lt;/a&gt;&lt;/p&gt;
  
                          &lt;a href="http://yesplus.al.home.dev/news/international-association-of-women-police-conference-cardiff/"&gt;&lt;h3 class="teal"&gt;Read more &amp;gt;&lt;/h3&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/article&gt;
              &lt;/div&gt;
                      &lt;div class="blog-item no-custom-style"&gt; 
                  &lt;article class="border half-red"&gt;
                      &lt;a href="http://yesplus.al.home.dev/news/yes-team-building-day/"&gt;
                                                  &lt;img src="" alt="Yes+ Team Building Day"&gt;
                      &lt;/a&gt;
  
                      &lt;div class="content"&gt;
                          &lt;a href="http://yesplus.al.home.dev/news/yes-team-building-day/"&gt;&lt;h3 class="red"&gt;Yes+ Team Building Day&lt;/h3&gt;&lt;/a&gt;
  
                          &lt;h3 class="red"&gt;17-09-2015&lt;/h3&gt;
  
                          &lt;p&gt;Our first Staff Team Building Day took place on 29th July. The aim of the day was to improve morale… &lt;a href="http://yesplus.al.home.dev/news/yes-team-building-day/"&gt;read post&lt;/a&gt;&lt;/p&gt;
  
                          &lt;a href="http://yesplus.al.home.dev/news/yes-team-building-day/"&gt;&lt;h3 class="red"&gt;Read more &amp;gt;&lt;/h3&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/article&gt;
              &lt;/div&gt;
                      &lt;div class="blog-item no-custom-style"&gt; 
                  &lt;article class="border half-yellow"&gt;
                      &lt;a href="http://yesplus.al.home.dev/news/mcgrath-support-for-yes/"&gt;
                                                  &lt;img src="" alt="McGrath Support for Yes+"&gt;
                      &lt;/a&gt;
  
                      &lt;div class="content"&gt;
                          &lt;a href="http://yesplus.al.home.dev/news/mcgrath-support-for-yes/"&gt;&lt;h3 class="yellow"&gt;McGrath Support for Yes+&lt;/h3&gt;&lt;/a&gt;
  
                          &lt;h3 class="yellow"&gt;17-09-2015&lt;/h3&gt;
  
                          &lt;p&gt;Yes+ have been selected from over 150 charities to receive a support package from leading philanthropists Harvey and Allison McGrath.… &lt;a href="http://yesplus.al.home.dev/news/mcgrath-support-for-yes/"&gt;read post&lt;/a&gt;&lt;/p&gt;
  
                          &lt;a href="http://yesplus.al.home.dev/news/mcgrath-support-for-yes/"&gt;&lt;h3 class="yellow"&gt;Read more &amp;gt;&lt;/h3&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/article&gt;
              &lt;/div&gt;
                      &lt;/section&gt;
  </code></pre>