Не удается получить сетку на основе Susy, чтобы правильно выровнять

Question

Я пробовал плагин Susy для Compass (SASS), но я заметил, что он не работает для меня.

Я взял index.html и screen.scss из official Susy tutorial, составил SCSS и поставить его на my server. Как вы можете видеть, что это выглядит так, как он должен (во всех браузерах я тестировал на):

То, что я сделал дальше было следующее:

• Скопируйте <article> в <div role="main"> и вставить его в шесть раз
• в screen.scss, изменить столбец-SPAN (div[role="main"] > article), соответственно: от @include columns(6,9); до @include columns(1,9);

Но теперь эти новые элементы вообще не выравниваются по сетке, они отключены четко видимым пространством. Я тестировал это в последних версиях FF, Safari и Chrome, и только FF, похоже, отображает его правильно. Снимок экрана от Chrome:

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

Это общая проблема с Сьюзи, что сетка неправильная или я делаю что-то неправильно? Если первое, знает ли кто-нибудь обходное решение? Я также пробовал с процентами и пикселями, но не работал.

Answer 1

Susy - это не просто еще одна сетка, как все остальные. Он был спроектирован так, чтобы выполнить очень конкретную цель: сетки, которые составляют fluid on the inside. Единицы, которые вы используете для создания сетки, применяются к контейнеру, а не к каждому столбцу. Все внутри построено с процентами. То, что вы видите, является нормальным. Это справедливо для всех жидкостных сеток, из-за sub-pixel rounding. Это не ошибка, это часть построения быстро реагирующих веб-сайтов.

Если вам нужны пиксельные точные сетки, Susy - неправильный инструмент для вас. Все зависит от того, что вы пытаетесь построить.

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

Cheers!

-e