Menu icon Foundation
Last column always float to the left

Hi on a page I have a listing with news items. Now when I have only two or four news items in a row the last item is always pushed to the right? As you can see here:  http://www.menes.nl/meubelblog/

 

      <div class="large-12 columns">
        <div class="news">
          <div class="row">
            <div class="small-12 medium-6 large-4 columns">item 1</div>
            <div class="small-12 medium-6 large-4 columns">item 2</div>
        </div>
       </div>
     </div>

sitecolumnfloatfill

Hi on a page I have a listing with news items. Now when I have only two or four news items in a row the last item is always pushed to the right? As you can see here:  http://www.menes.nl/meubelblog/

 

      <div class="large-12 columns">
        <div class="news">
          <div class="row">
            <div class="small-12 medium-6 large-4 columns">item 1</div>
            <div class="small-12 medium-6 large-4 columns">item 2</div>
        </div>
       </div>
     </div>
Wiechert Hooghwinkel over 2 years ago

Solved this by using the block-grid layout.

 

So now it looks like this:

<div class="large-12 columns">
        <div class="news">
          <div class="row small-up-2 medium-up-3 large-up-4">
             <!-- and for the news-items which will be added through cms -->
            <div class="column column-block">item 1</div>
        </div>
       </div>
     </div>