Singularity Grid System показывает сетку при использовании "контейнера"

Question

У меня есть макет Singularity, который помещает отступы по обе стороны от "контейнера", как предложено в выпусках Singularity здесь: https://github.com/Team-Sass/Singularity/issues/91

.container {
  // Sets a max width. Site will be fluid until it reaches 960px, then stick there.
  max-width: 960px;
  // Centers the container.
  margin: 0 auto;
  // Sets padding equal to a gutter.
  padding-left: gutter-span();
  padding-right: gutter-span();
  // Might as well clearfix it as well.
  @include clearfix;
}

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

Я не понимаю, на каком элементе я бы показал сетку, используя @include background-grid пока развивается.

Если я положу его на .container тогда сетка будет отображаться под отступом, который на самом деле не является частью сетки. Конечно, я мог бы создать элемент внутри него, но этот элемент предназначен исключительно для визуальной разработки и поэтому является избыточным, когда я выключаю отображение сетки.

Вы можете видеть на изображении ниже, как черная линия выходит на край своего родителя. .container но решетка будет за этим.

Answer 1

Таким образом, вы используете отступы, чтобы добавить желоба в контейнер. Фоны растягиваются до желобов, так что ваша сетка отключена.

Лобовое решение заключается в использовании подконтейнера. Нанесите прокладку на внешний контейнер. Примените clearfix и сетку фона на внутренний контейнер.

background-clip: content-box действительно лучшее решение. Вам все равно не нужен фон отладочной сетки в IE8.