How to add margin between list items with Foundation 5? - css

Question

I have a list of items, 4 per row, each item is a gray rectangle with text in it. Problem: these items touch each other and I want space between them. Apparently some SASS variable can be changed but it sounds complex and there's no way I do anything complex to achieve something so elemental. Is there some simple solution to my problem?
Markup:
<div class='row'>
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li id='home_li_computing'>text1</li>
<li id='home_li_field'>text2</li>
<li id='home_li_thinking'>text3</li>
<li id='home_li_guide'>text4</li>
</ul>
</div>
CSS:
li {
border: 1px solid #ddd;
background-color: #eee;
}

Answer 1

You will need to reduce the width of the block-grid li items and then add a margin to take up the extra width.
Here is a simple css solution:
.large-block-grid-4 > li {
width: 20%;
margin: 2.5%;
}
.medium-block-grid-3 > li {
width: 28.33333%;
margin: 2.5%;
}
li {
border: 1px solid #ddd;
background-color: #eee;
}
You would need to add all the various widths and margins for all the block-grids that you intend to use.

Answer 2

The li is what spaces out the items and should be left alone. The easy solution is to put a container inside each li like this:
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li id="home_li_computing"><div class="list-container">text1</div></li>
<li id="home_li_field"><div class="list-container">text2</div></li>
<li id="home_li_thinking"><div class="list-container">text3</div></li>
<li id="home_li_guide"><div class="list-container">text4</div></li>
</ul>
And your css would look the same, just targets the container:
.list-container {
border: 1px solid #ddd;
background-color: #eee;
}
I would not recommend adjusting margin percentages on responsive frameworks as that's just asking for issues. If you want to adjust spacing, always use padding since that will eat the inside instead of add to the total width.
Ex. 5px of margin all-around on 33% width is 33% + 10px. 5px of padding to 33% width is still 33%. This works as long as border-box isn't turned off.