Padding content inside grid column layout

Question

I am using the Zurb Foundation framework to build the front-end (http://foundation.zurb.com/docs/grid.php) and I have created my basic layout fine, no problems.

What I am wondering about is how to pad the content inside the columns? All the content is aligned to the left side as you'd expect, but I can't see a way to create a padding without either customising the grid layout markup, or creating lots of wrappers everywhere.

For example, the markup

<div class="container">
  <div class="row">
    <div class="eight columns customise-the-grid">
      <p>My main content</p>
      <ul><li>My item</li></ul>
      <!-- other various content -->
    </div>
    <div class="four columns">
      <div class="or-create-a-wrapper">
        <p>My main content</p>
        <ul><li>My item</li></ul>
        <!-- other various content -->
      </div>
    </div>
  </div>
</div>

Some css to illustrate

.customise-the-grid{
  padding: 10px;
}
.or-create-a-wrapper{
  padding: 10px;
}

Answer 1

Yes this has always been the problem with Grid systems and non-fluid designs. Not to mock them though, they definetly have their advantages against fluid designs, but they are awkward to work with.

What i'd do is to set a margin on the element inside the element you wish padding on. If that makes sense.

<div class="four columns">
  <div class="or-create-a-wrapper"><!-- margin here -->
    <p>My main content</p>
    <ul><li>My item</li></ul>
    <!-- other various content -->
  </div>
</div>

OR

<div class="four columns">
  <div class="or-create-a-wrapper">
     <div class="another-div-yay"><!-- margin here -->
       <p>My main content</p>
       <ul><li>My item</li></ul>
      </div>
    <!-- other various content -->
  </div>
</div>

Answer 2

why not add padding or margin to the child elements? something like

.columns * {margin:0px 10px}

Answer 3

You can create a wrapper with padding on the parent column.

<div class="container">
  <div class="row">
    <div class="eight columns customise-the-grid">
        <div class="small-12 content-wrapper column">  
          <p>My main content</p>
          <ul><li>My item</li></ul>
          <!-- other various content -->
        </div>
    </div>
    <div class="four columns or-create-a-wrapper">
      <div class="small-12 content-wrapper column">
        <p>My main content</p>
        <ul><li>My item</li></ul>
        <!-- other various content -->
      </div>
    </div>
  </div>
</div>
<style>
.customise-the-grid{
  padding: 10px;
}

.or-create-a-wrapper{
  padding: 10px;
}

.content-wrapper{
    background-color:lightgray;
    border-radius: 10px;
}
</style>

Here is a fiddle : https://jsfiddle.net/mantisse_fr/40cgg84u/