Menu icon Foundation
empty columns

How can I create empty spaces? You can see in the html, I created 4 columns, the 2nd column was the one I wanted empty, but the 3rd column took its position. Why is this and how can I have empty spaces?

 <body>  
  <section>
     <div class="row">
       <div class="large-12 columns">
        <h1>Excepteur sint occaecat cupidatat non</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
       </div>
     </div>
     <div class="row">
       <div class="large-3 medium-3 columns">
        <ul>
         <li>San Francisco</li>
         <li>Miami</li>
         <li>Atlanta</li>
        </ul>
       </div>
       <div class="large-3 medium-3 columns">
       </div>
       <div class="large-3 medium-3 columns">
        <ul>
         <li>Washington</li>
         <li>New York</li>
         <li>Denver</li>
        </ul>
       </div>
       <div class="large-3 medium-3 columns">
        <ul>
         <li>Los Angeles</li>
         <li>Chicago</li>
         <li>Portland</li>
        </ul>
       </div>
     </div>
  </section>
 </body>
            

         

Empty spaces

columnsgrid

How can I create empty spaces? You can see in the html, I created 4 columns, the 2nd column was the one I wanted empty, but the 3rd column took its position. Why is this and how can I have empty spaces?

 <body>  
  <section>
     <div class="row">
       <div class="large-12 columns">
        <h1>Excepteur sint occaecat cupidatat non</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
       </div>
     </div>
     <div class="row">
       <div class="large-3 medium-3 columns">
        <ul>
         <li>San Francisco</li>
         <li>Miami</li>
         <li>Atlanta</li>
        </ul>
       </div>
       <div class="large-3 medium-3 columns">
       </div>
       <div class="large-3 medium-3 columns">
        <ul>
         <li>Washington</li>
         <li>New York</li>
         <li>Denver</li>
        </ul>
       </div>
       <div class="large-3 medium-3 columns">
        <ul>
         <li>Los Angeles</li>
         <li>Chicago</li>
         <li>Portland</li>
        </ul>
       </div>
     </div>
  </section>
 </body>
            

         

Empty spaces
dims about 4 years ago

add a space in the second columns and see

// add  following in second column
&nbsp;

<div class="large-3 medium-3 columns">
       &nbsp;
   </div>

sanlorena about 4 years ago

it worked! Now I thought of doing something similar, but maybe it would be considered bad practice, so no other way around it - let's say with offset?

Rafi Benkual about 4 years ago

I think this is similar to the answer posted here - http://foundation.zurb.com/forum/posts/35304-dealing-with-incomplete-grid-rows-in-ajax-requests

You could do

:empty {
  display: none;
}

dims about 4 years ago

often there are more than one ways to achieve a result. i dont think using nbsp; is a bad practice. if you need 3 columns you can use 3 columns and push the 2nd columns.. something like this:

<div class="row">
       <div class="large-12 columns">
        <h1>Excepteur sint occaecat cupidatat non</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
       </div>
     </div>
     <div class="row">
       <div class="large-3 medium-3 columns">
        <ul>
         <li>San Francisco</li>
         <li>Miami</li>
         <li>Atlanta</li>
        </ul>
       </div>
             <div class="large-3 medium-3  large-push-3 columns">
        <ul>
         <li>Washington</li>
         <li>New York</li>
         <li>Denver</li>
        </ul>
       </div>
       <div class="large-3 medium-3 columns">
        <ul>
         <li>Los Angeles</li>
         <li>Chicago</li>
         <li>Portland</li>
        </ul>
       </div>
     </div>

sanlorena about 4 years ago

I did see that post, but I don't know Ajax just yet. So I can go with the first solution or using push. Now I remember push not being useful in another example, I'll post it here if I have issues again.
Thank you!

sanlorena about 4 years ago

I made an example on using pull and push to create empty cols, but it seems push doesn't work because you can see the col under it that was not pulled. So should we only use these classes - if both are used?

 <div class="row">
    <div class="large-6 large-push-6 columns">
      <p class="outline level">1st col pushed</p>
    </div>
    <div class="large-6 columns">
      <p class="outline">col</p>
    </div>
  </div>

  <div class="row">
    <div class="large-4 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-4 large-push-4 columns">
      <p class="outline level">2nd col pushed</p>
    </div>
    <div class="large-4 columns">
     <p class="outline">col</p>
    </div>
  </div>

  <div class="row">
    <div class="large-3 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-3 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-3 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-3 large-pull-3 columns end">
      <p class="outline level">4th col pulled</p>
    </div>
  </div>

  <div class="row">
    <div class="large-3 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-3 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-3 large-pull-6 columns">
      <p class="outline level">4th col pulled</p>
    </div>
    <div class="large-3 large-pull-6 columns end">
      <p class="outline level">5th col pulled</p>
    </div>
  </div>