Remplissage du contenu dans les colonnes de la grille

Question

J'utilise le cadre de la Fondation Zurb pour construire le front-end (http://foundation.zurb.com/docs/grid.php) et j'ai créé ma mise en page de base sans problème.

Ce que je me demande, c'est comment remplir le contenu à l'intérieur des colonnes ? Tout le contenu est aligné sur le côté gauche comme on peut s'y attendre, mais je ne vois pas comment créer un remplissage sans personnaliser le balisage de la grille ou créer de nombreux wrappers 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>

Un peu de 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 les conceptions non fluides. Il ne s'agit pas de se moquer d'eux, ils ont certainement des avantages par rapport aux conceptions fluides, mais il est difficile de travailler avec eux.

Ce que je ferais, c'est de définir une marge sur l'élément à l'intérieur de l'élément sur lequel vous souhaitez un rembourrage. Si cela a un 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 un padding ou une marge aux éléments enfants ? quelque chose comme

.columns * {margin:0px 10px}

Answer 3

Vous pouvez créer un wrapper avec un padding sur le 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>

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