Menu icon Foundation
What is the proper way to add a blank or spacer column?

Is just adding   to a spacer column the proper way to do it? I've seen you can set an offset but that only bumps the columns to the right correct? What I've done works, I'm just not sure if it's the most elegant or proper way to do it. See image & code.

Spacer

        <div class="large-2 columns">&nbsp;</div>
        <div class="large-4 columns">CONTENT</div>
        <div class="large-4 columns">CONTENT</div>
        <div class="large-2 columns">&nbsp;</div>
            

         

gridspaceroffset

Is just adding   to a spacer column the proper way to do it? I've seen you can set an offset but that only bumps the columns to the right correct? What I've done works, I'm just not sure if it's the most elegant or proper way to do it. See image & code.

Spacer

        <div class="large-2 columns">&nbsp;</div>
        <div class="large-4 columns">CONTENT</div>
        <div class="large-4 columns">CONTENT</div>
        <div class="large-2 columns">&nbsp;</div>
            

         
Rafi Benkual over 4 years ago

Couple ways to do this:

  1. wrap the columns in row that has centered columns like a "large-9 large-centered"
  2. Use offsets "large-offset-1"

Jon Friedrich over 4 years ago

Hmm Interesting, with that method, would the top row of 3 items maintain the exast same width rows as the bottom 4? (see image above)

Rafi Benkual over 4 years ago

Yes, it will move the content to the middle. Here is an example taken from http://foundation.zurb.com/business/services.html which we made recently.

<div class="row">
  <div class="medium-8 medium-centered columns">
  <div class="row">
    <div class="medium-6 columns">
      <h3>Header</h3>
      <p>Some test</p>
    </div>

    <div class="medium-6 columns">
       <h3>Header</h3>
       <p>Some text</p>
    </div>
  </div>
</div>
</div>

Jon Friedrich over 4 years ago

I've implemented the above code but the column widths aren't equal. See page here
http://www.s278616331.onlinehome.us/other%20sites/RD/web-design.html The size difference becomes very noticible when in mobile view and looking at the bottom two images compared to the above ones. Any idea why this is?

Rafi Benkual over 4 years ago

I guess I'm not seeing it or you fixed it. Looks aligned to me.

Jon Friedrich over 4 years ago

Unfortunately it still isn't fixed. They are aligned as far as centering goes but they are not the same size.

See here http://imgur.com/akD4P0v

Ana Jones over 1 year ago

That problem now is fixed buyinstfollowers and evrything is ok. So is so easier for working.

Rameez Ramzan over 1 year ago

Hi,

Please review this and let me know

<table>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td class="spaced">Three</td>
    </tr>
</table>

td {
    padding: 8px;
    background-color: #eee;
    display: inline-block;
    margin: 0;
    border: 0;
}
td.spaced {margin-left: 20px;}