Displaying columns with space between them - zurb-foundation

Question

How I can display columns with space between them? by default they are all following each other and I can't find a way to change that.
Here is an example from youtube:

Answer 1

Depends on how much spacing do you want... when you use a frontend framework sometimes you need to make some tradeoff, development speed vs "not too customized". The sample you take from youtube has less spacing than default column gutter of the framework, so your affirmation of "by default they are all following each other", I think is not quite precise; they have spacing, if you want to remove, just use row collapse as the class of the columns container.
Now, if you want more spacing than the default, you still have options:
You can leave a column between each element, just a matter to add one column offset to each one.
You can change the column gutter size on framework settings (if you're using the CLI version or customized, not the prebuilt)
You can also write some CSS to increase spacing for an specific column container (I won't recommend to do so globally because you could mess with the framework).

Answer 2

Your solution is to use a framework such as Bootstrap or Foundation. in foundation, every 'column' is inside padded, so you're able to display a grid such as this.
Read here for more info: http://foundation.zurb.com/sites/docs/grid.html

Answer 3

This post is tagged with Zurb Foundation, so I will solve it using their classes with what is a little bit of a workaround. For example, if you want three columns with the ability to keep adding items and have it automatically wrap you could have the following simple example with the block grid:
<div class="grid-x small-up-3">
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
</div>
and the following CSS
.small-up-3 > .cell {
width: calc(33.33333% - 4px);
margin-left: 2px;
margin-right: 2px;
}
.small-up-3 > .cell:nth-of-type(n+4) {
margin-top: 2px;
}
The calc is needed to subtract your margin from the width of each cell to prevent the wrapping you are seeing when just adding normal margin.