Best way to create blank columns?

If you wish to change the columns or create a new template using that column layout you mentioned, you would need to do something like…

<div class="templatecontainer">
  <div class="site-content row">
    <div class="col grid_2_of_12">Add your content here</div>
    <div class="col grid_3_of_12">Add your content here</div>
    <div class="col grid_2_of_12">Add your content here</div>
    <div class="col grid_3_of_12">Add your content here</div>
    <div class="col grid_2_of_12">Add your content here</div>
  </div>
</div>

The div 'site-content row' will create the row to contain your columns. The class 'site-content' has a max-width of 1200px wide (unless you’ve changed this of course).

Since each column is floated left, if there’s no content in the container, it will just collapse as per any floated container.

Thanks for getting back to me so quickly. You brought up my issue–if there’s no content in the container, it will collapse since it is floated left. In your example of html, is there a good way to do something like this:

<div class="templatecontainer">
  <div class="site-content row">
    <div class="col grid_2_of_12">No content but column does not collapse</div>
    <div class="col grid_3_of_12">Content displays normally</div>
    <div class="col grid_2_of_12">No content but column does not collapse</div>
    <div class="col grid_3_of_12">Content displays normally</div>
    <div class="col grid_2_of_12">No content but column does not collapse</div>
  </div>
</div>

In bootstrap I think they refer to it as “offsetting”: https://getbootstrap.com/2.3.2/scaffolding.html

If you want to do an offset bootstrap style you need to add this to your grid.css file:

.offset_11 { margin-left: 91.46% !important; }
.offset_10 { margin-left: 83% !important; }
.offset_9 { margin-left: 74.54% !important; }
.offset_8 { margin-left: 66.08% !important; }
.offset_7 { margin-left: 57.62% !important; }
.offset_6 { margin-left: 49.16% !important; }
.offset_5 { margin-left: 40.7% !important; }
.offset_4 { margin-left: 32.24% !important; }
.offset_3 { margin-left: 23.78% !important; }
.offset_2 { margin-left: 15.32% !important; }
.offset_1 { margin-left: 6.86% !important; }

Then add the offset class to the column you want to offset. For example:

<div class=”col grid_8_of_12 offset_2″>

(the !important overrides the .col:first-child { margin-left: 0; } for first columns)

Oh and of course you’ll need to undo this in your media queries because it will mess up the responsiveness.

Great, thanks for this. I started going down this road and it’s great to hear that it is how you are accomplishing it too. Really appreciate it.

Thanks @tb92767. Yep, that’s what I was going to recommend as well. Adding in some classes with margin-left to allow for blank columns.

??