Заполнение содержимого внутри макета столбца сетки

Question

Я использую фреймворк Zurb Foundation для создания интерфейса (http://foundation.zurb.com/docs/grid.php), и я создал свой основной макет, никаких проблем ,

Что мне интересно, как разместить содержимое внутри столбцов? Все содержимое выравнивается с левой стороны, как и следовало ожидать, но я не вижу способа создания прокладки без настройки разметки сетки или создания множества оболочек повсюду.

Например, разметка

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

Некоторые CSS, чтобы проиллюстрировать

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

Answer 1

Да, это всегда была проблема с сетчатыми системами и нежидкими проектами. Чтобы не издеваться над ними, они определенно имеют свои преимущества против жидких конструкций, но им неловко работать.

Что бы я сделал, это установить запас на элемент внутри элемента, который вы хотите заполнить. Если это имеет смысл.

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

ИЛИ

<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

почему бы не добавить отступы или маржу для дочерних элементов? что-то вроде

.columns * {margin:0px 10px} 

Answer 3

Вы можете создать оболочку с прокладкой на материнской 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> 

Вот скрипка: https://jsfiddle.net/mantisse_fr/40cgg84u/