Contenido de relleno dentro del diseño de la columna de la cuadrícula

Question

Estoy usando el marco de la Fundación Zurb para construir el front-end (http://foundation.zurb.com/docs/grid.php) y he creado mi diseño básico bien, sin problemas.

Lo que me pregunto es cómo encender el contenido dentro de las columnas. Todo el contenido está alineado con el lado izquierdo como era de esperar, pero no puedo ver una manera de crear un relleno sin personalizar el marcado de diseño de la cuadrícula o crear muchos envoltorios en todas partes.

Por ejemplo, el marcado

<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>

Algunos CSS para ilustrar

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

Answer 1

Sí, este siempre ha sido el problema con los sistemas de cuadrícula y los diseños no fluidos. Sin embargo, para no burlarse de ellos, definitivamente tienen sus ventajas contra los diseños de fluidos, pero es incómodo trabajar con los que trabajan.

Lo que haría es establecer un margen en el elemento dentro del elemento en el que desea acolchar. Si eso tiene sentido.

<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>

O

<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

¿Por qué no agregar relleno o margen a los elementos infantiles? algo como

.columns * {margin:0px 10px}

Answer 3

Puede crear un envoltorio con relleno en el padre 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>

Aquí hay un violín:https://jsfiddle.net/mantisse_fr/40cgg84u/