Макет Singularitygs в отступах макета

Я использую основной макет из двух сеток, которые служат контентом и правой панелью. Затем в содержании у меня есть три интервала сетки, которые являются равными столбцами. Вот так: 1. Родительский диапазон: 6 и 6 2. Дочерний диапазон первого столбца: 4 и 4 и 4

Что происходит, так это то, что когда я использую grid-span для содержимого 3 столбца, тогда у них есть отступы, все три из них, и отступ последнего столбца визуально добавляется к отступу родительского контейнера для создания двойного желоба.

Однако, когда я использую float-span, последний из трех столбцов контента не имеет заполнения и выглядит визуально длиннее, чем первые два столбца.

Есть ли способ сделать все 3 дочерних столбца одинакового размера И иметь третий столбец без заполнения, без необходимости взлома сингулярности с переопределением css?

введите здесь описание изображения


layout sass singularitygs
person Alexei Rayu    schedule 24.06.2014    source источник
comment
Воспроизведите проблему на sassmeister.com , обновите свое сообщение со ссылкой на него, а затем ответьте в комментариях.   -  person Andrey Mikhaylov - lolmaus    schedule 25.06.2014
comment
В моем sassmeister все работает как положено sassmeister.com/gist/7be2b0a8791bf105af54. На моем сайте разработки grid-span добавляет отступы для желобов, а не использует поля. Смотрите прикрепленный скриншот. В результате последний столбец (дочерний 3) не имеет заполнения (потому что он последний)? и оказывается больше, чем два предыдущих.   -  person Alexei Rayu    schedule 25.06.2014
comment
У вас есть некоторые стили или конфигурация, которые создают нежелательное заполнение. Дважды проверьте свои стили. Также поделитесь выводом @debug $singularity.   -  person Andrey Mikhaylov - lolmaus    schedule 25.06.2014
comment
Хорошо удалось воспроизвести. Разница в том, что отступ фиксируется в пикселях. Пожалуйста, посмотрите на песочницу. Если вы посмотрите на зеленый абзац Child 3 в инструментах разработчика, вы увидите, что он на самом деле шире, чем два других, потому что его родительский столбец не имеет заполнения желоба последним. sassmeister.com/gist/7be2b0a8791bf105af54 — я выделил столбцы, чтобы вы могли видеть, как первые два имеют горизонтальные отступы а последний нет. Я думаю, нет никакого способа обойти это. Должен быть штраф за использование стационарного желоба...   -  person Alexei Rayu    schedule 26.06.2014
comment
Я не вижу проблемы. Так работают фиксированные водосточные желоба.   -  person Andrey Mikhaylov - lolmaus    schedule 28.06.2014

Ответы (1)


arrow_upward
1
arrow_downward

Именно так в первую очередь работают фиксированные желоба Singularity.

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

См. эту демонстрацию: http://sassmeister.com/gist/b2d957171427022de7c7

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

.parent
  .child-1
    +grid-span(1,1)
  .child-1
    +grid-span(1,2)

Никогда не используйте трехуровневую глубину, если только у вас нет очень-очень веской причины.

person Andrey Mikhaylov - lolmaus    schedule 28.06.2014