Добавление отступов в сеточную систему CSS, например 960.gs

Question

Я строю сайт, который использует популярную сетку с 16 колонками 960.gs. Вот снимок экрана с соответствующей частью дизайна с наложенными сверху столбцами сетки:

Проблема в белой коробке "прямо сейчас". Так как у этого есть белый фон, я хочу немного отступа внутри коробки. Достаточно просто: я добавил <div> внутри родительского и стилизовать его соответствующим образом padding: 10px и белый фон.

Проблема возникает, когда я пытаюсь повторно использовать сетку внутри "внутреннего" <div> как это. например, внутри этого белого поля я хочу, чтобы список ссылок находился внутри контейнера из 5 столбцов, а изображение - в контейнере из 3 столбцов (извините, на снимке экрана его размер не отображается).

Я попытался переопределить размеры столбцов сетки внутри .inner Класс, который частично работает - я удалил 10 пикселей из каждого размера столбца, так как общая ширина должна быть на 20 пикселей меньше, чем прежде, чтобы учесть поля. Это работает в случае, когда есть ровно два ребенка <div>s внутри .inner контейнер, но, очевидно, если их больше или меньше 2, все начинает выглядеть не так.

У кого-нибудь есть хорошая стратегия для решения подобных проблем? Я хотел бы просто поместить отступы на все столбцы, независимо от цвета фона, но не смог бы заставить это работать так, как я хотел при взломе сетки.

спасибо Мэтт

Answer 1

960gs имеет .alpha а также .omega класс для разрешения вложенности. Обычно это удаляет ведущую и конечную 10px маржу из элементов, к которым вы ее применяете. Возможно, вы сможете изменить их и неправильно использовать, чтобы получить необходимые отступы - общая ширина столбцов будет суммироваться, но заполнение будет на "неправильной" стороне

<div class="container_12">
  <div class="grid_12">
    <div class="grid_5 omega">...</div>
    <div class="grid_3 alpha">...</div>
  </div>
</div>

Я не проверял это, хотя так не уверен, что это будет работать