Polsterinhalt im Gitterspaltenlayout

Question

Ich benutze das Zurb Foundation Framework, um das Front-End (http://foundation.zurb.com/docs/grid.php) zu erstellen, und ich habe mein grundlegendes Layout in Ordnung erstellt, keine Probleme.

Ich frage mich, wie ich den Inhalt in den Spalten padelt? Der gesamte Inhalt ist wie erwartet auf der linken Seite ausgerichtet, aber ich kann keinen Weg sehen, um eine Polsterung zu erstellen, ohne entweder das Rasterlayout -Markup anzupassen oder überall viele Wrapper zu erstellen.

Zum Beispiel das 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>

Einige CSS zu veranschaulichen

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

Answer 1

Ja, das war schon immer das Problem mit Gittersystemen und nicht-flüssigen Designs. Um sie jedoch nicht zu verspotten, haben sie auf jeden Fall ihre Vorteile gegen Flüssigkeitsdesigns, aber es ist unangenehm, mit ihnen zu arbeiten.

Was ich tun würde, ist, einen Rand auf dem Element in das Element einzustellen, das Sie sich wünschen. Wenn das Sinn macht.

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

ODER

<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

Warum nicht den Kinderelementen Polsterung oder Marge hinzufügen? etwas wie

.columns * {margin:0px 10px}

Answer 3

Sie können eine Wrapper mit Polsterung auf dem Elternteil erstellen 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>

Hier ist eine Geige:https://jsfiddle.net/mantisse_fr/40cgg84u/