Rembourrage contenu à l'intérieur de la disposition des colonnes de la grille

Question

J'utilise le framework Foundation Zurb pour construire le front-end (http://foundation.zurb.com/docs/grid.php) et j'ai créé mon beau mise en page de base, pas de problème.

Ce que je me demande est sur la façon de rembourrer le contenu à l'intérieur des colonnes? Tout le contenu est aligné sur le côté gauche comme on pouvait s'y attendre, mais je ne peux pas voir un moyen de créer un rembourrage sans soit personnaliser la mise en page grille balisage, ou en créant beaucoup d'emballages partout.

Par exemple, le balisage

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

Certains css pour illustrer

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

Answer 1

Oui, cela a toujours été le problème avec les systèmes de grille et de conceptions non fluides. Pour ne pas se moquer d'eux cependant, ils ont leurs avantages definetly contre des conceptions fluides, mais ils sont difficiles à travailler avec.

Qu'est-ce que je ferais est de fixer une marge sur l'élément à l'intérieur de l'élément que vous souhaitez avoir un rembourrage sur. Si cela a du sens.

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

ou

<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

pourquoi ne pas ajouter le remplissage ou la marge aux éléments de l'enfant? quelque chose comme

.columns * {margin:0px 10px}

Answer 3

Vous pouvez créer une enveloppe avec un rembourrage sur la column mère.

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

Voici un violon: https://jsfiddle.net/mantisse_fr/40cgg84u/