вложение столбцов с использованием grid-span и layout правильно и background-grid

привет всем,

Я изучал фреймворк сетки Singularity, и до сих пор мне очень нравились его простота и концепции/ментальные модели. однако, как и другие, я все еще немного не понимаю, как правильно делать вложенные сетки в Singularity. после просмотра похожих вопросов:

я придумал следующие примеры для создания вложенных сеток: один использует только grid-span, а другой использует layout и grid-span:

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

  1. существует ли «лучшая/рекомендуемая практика» для создания вложенных сеток с помощью Singularity?

  2. почему сетки, нарисованные background-grid на одних и тех же элементах, различаются при использовании grid-span и layout? кажется, что вложенные столбцы создаются по-разному и, следовательно, имеют разные «внутренние» столбцы? фоновые сетки с использованием layout кажутся более правильными, хотя даже там некоторые элементы выглядят неправильно (например, «первый» элемент имеет 10 столбцов внутри, нарисованных background-grid, в то время как он охватывает только 8 столбцов родительского контейнера, а «a» & Элементы "b" имеют 6 столбцов, нарисованных внутри с помощью background-grid, хотя они охватывают только 3 столбца родительского контейнера).

    Я заранее извиняюсь, если я неправильно понимаю какую-то простую идею сингулярности. на самом деле, это, вероятно, вероятно ;)

    Заранее благодарю за любую помощь.

мир


sass compass-sass singularitygs
person waynedpj    schedule 02.12.2013    source источник

Ответы (1)


arrow_upward
4
arrow_downward

layout используется, когда вы вкладываете много вещей. Вы просто указываете свой контекст один раз, а затем можете вкладывать подэлементы в этот вложенный контекст.

grid-span предлагает одноразовое назначение контекста. Это для вложения отдельного элемента.

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

person scottkellum    schedule 03.12.2013
comment
Спасибо за информацию. таким образом, поскольку background-grid использует контекст сетки, который изменяется только путем модификации $grids или использования layout, имеет смысл использовать его только внутри контейнеров. это правильное понимание? еще раз спасибо за помощь и за Singularity. - person waynedpj; 05.12.2013