2013-05-30 2 views
0

Я хочу, чтобы создать что-то подобное в Susy grid system:Полный фон размер разделов в Susy сетки

Website layout

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

Если я использую простой контейнер сетки, я могу установить цвет фона только внутри div, который находится внутри сетки, но я хотел бы, чтобы цвет фона был растянут на левый и правый края веб-сайта. Содержимое остается внутри сетки.

Я нашел решение, используя несколько контейнеров с сеткой (по одному для каждой секции), но я слышал, что этот подход не рекомендуется.

И я также не хочу использовать контейнер для жидкой сетки.

+0

Где вы слышали, что подход с несколькими контейнерами не рекомендуется? Я очень рекомендую. Существуют и другие варианты использования сгенерированного контента и отрицательных полей, но я нахожу их все немного отличными по сравнению с просто несколькими контейнерами. –

+0

_ "@ include container mixin применит сетку susy, привязанную к этому контейнеру, чтобы на самом деле вы могли иметь несколько сеток на странице, но я не рекомендую это." _ ← найдено в [это введение Susy] (http: // scottdavis. github.io/blog/2011/12/30/introduction-to-building-websites-using-susy-and-compass-vertical-rhythm/). И нет также упоминания в ссылке Susy, поэтому я был немного смущен, правильно ли этот подход. Но если вы говорите, это не проблема для использования нескольких контейнеров, чем это прекрасно. –

+0

О, я вижу, что вы разработчик Сьюзи, поэтому я могу серьезно относиться к вашим советам! :-) –

ответ

0

Как отметил Эрик Мейер, разработчик компании Susy, сетка Susy - это всего лишь концепция, и нет ничего плохого в том, что на веб-сайте есть несколько сеток, по одному в каждом разделе.

0

Я имел дело с аналогичной проблемой. Я использовал следующий подход: возьмите div (назовем его «content») внутри каждого из ваших разделов.

Применить класс контейнера к div 'content'. .content{@include container;} Таким образом, когда вы устанавливаете цвет фона в разделе, он охватывает всю ширину страницы, в то время как содержание в разделах соответствует правилам сетки.

Надеюсь, что это имеет смысл.

+0

Это именно то решение, которое я использовал. –

Смежные вопросы