Как в SUSY задать такую сетку?

Question

[sinneren]

Проблема такая: есть макет и довольно стандартная сетка. Решил начать пользоваться susy. До этого только игрался им, без реальных проектов. 12 колонок, 1200 ширина рабочей области, 80px колонка, 20px отступ.
Так вот, перепробовал все,казалось бы, варианты. Остановился на наиболее подходящем, но тоже не то. В данном случае отступы по краям и со смещением. Иные варианты вообще не правильные.

columns: 12,
  column-width: 80px,
  container: 1200px,
  container-position: center,
  gutters: 1/4,
  gutter-position: split,
  global-box-sizing: border-box,
  math: fluid,
  output: float

Comments

[copal]

я могу ошибаться, но с сетками вроде все как-то по другому. Вы должны составить условие так чтобы поделить все пространство, а затем указать чтобы начиналась со второй колонки. Либо вообще контейнер с сеткой просто центрировать.

[sinneren]

copal: контейнер центрируется, container-position: center, всё ок. но выходят не те отступы по краям. А когда начинаю ряду элементом, например, в этой шапке задавать спаны, то происходит не точное вычисление и выходит, что лого span(1) нормально, текст лого Span(2) тоже, но уже длиннее нужного на пару пикселей, далее идут наши блоки текста, смещаются еще на пару, итого в конце мы имеем смещение примерно на 10 пикселей. Допустим, мы забъём на это, выглядит норм, но ниже еще я использовал span(5 at 2) для 2 блоков. и вот тут проблемы серъёзнее, т.к. 2 блок просто спрыгивает.

Answer 1

[metaf]

gutter-position: split - это то же самое, что сетка bootstrap. Вам нужно добавлять еще одну обертку вроде ".row" и задавать отрицательный margin по краям. www.sassmeister.com/gist/0ec0cb3e82eb21baa15fc250d...
И еще, читая ваши комментарии, вопрос: а в каком контексте вы используете span(5 at 2)?

Comments

[sinneren]

В хедере контейнер растянутом автоматически на весь экран есть контейнер, выравненный по центре @include container(show overlay);
внутри блоки лого, название, у них спаны. и далее блок слогана и меню, вот на нём и применене 5 at 2

[metaf]

sinneren: Дело в том, что слово "at" - оно для асимметричных сеток и для output: isolate. susydocs.oddbird.net/en/latest/toolkit/#location . Вы пытаетесь пропустить пару спанов, так? тогда вам нужно добавить туда отступ и указать пропускаемое количество спанов: либо с помощью какого-то из этих свойств susydocs.oddbird.net/en/latest/toolkit/#margins либо этих susydocs.oddbird.net/en/latest/toolkit/#padding . Вот пример codepen.io/olgar/pen/wWpBNd (закомментированы правила, которые аналогичны друг другу).

[metaf]

sinneren: кстати, когда у вас math: fluid, - column-width: 80px указывать нет смысла, размер колонок вычисляет сам Susy. Это нужно только для math: static

[sinneren]

metaf: да, похоже надо было ставить Math:static, спасибо, хотя потеряю динамичность...