#layout #sass #singularitygs
#макет #sass #singularitygs
Вопрос:
Я использую основной макет из двух сеток, которые служат в качестве содержимого и правой панели. Затем, в содержимом, у меня есть три сетки, которые являются равными столбцами. Вот так: 1. Родительский диапазон: 6 и 6 2. Дочерний диапазон первого столбца: 4 и 4 и 4
Что происходит, так это то, что когда я использую grid-span для содержимого 3 столбцов, тогда у них есть отступы, все три из них, а отступ последнего столбца визуально дополняет отступ родительского контейнера, создавая двойной желоб.
Однако, когда я использую float-span, тогда у нас последний из трех столбцов содержимого не имеет заполнения и выглядит визуально длиннее, чем первые два столбца.
Есть ли способ сделать все 3 дочерних столбца одинакового размера И иметь третий столбец без заполнения, без необходимости взлома singularitygsс переопределениями css?
Комментарии:
1. Пожалуйста, воспроизведите проблему на sassmeister.com , обновите свой пост ссылкой на него, а затем ответьте в комментариях.
2. В моем sassmeister он работает так, как ожидалось sassmeister.com/gist/7be2b0a8791bf105af54 . На моем сайте разработчика сетка добавляет отступы для желобов, а не использует поля. Смотрите прилагаемый скриншот. В результате последний столбец (дочерний 3) в конечном итоге не имеет заполнения (потому что он последний)? и в итоге получается больше, чем два предыдущих.
3. У вас есть некоторые стили или конфигурации, которые создают это нежелательное заполнение. Дважды проверьте свои стили. Также делитесь выводом
@debug $singularity.4. Хорошо удалось воспроизвести. Разница в том, что желоб фиксирован в пикселях. Пожалуйста, посмотрите на песочницу. Если вы посмотрите на дочерний 3 зеленый абзац в dev tools, вы увидите, что он на самом деле шире, чем два других, потому что в его родительском столбце нет заполнения желоба, являющегося последним. sassmeister.com/gist/7be2b0a8791bf105af54 — Я выделил столбцы, чтобы вы могли видеть, что первые два имеют горизонтальное заполнение, а последний — нет. Я думаю, что нет никакого способа обойти это. Должно быть наказание за использование фиксированного желоба…
5. Я не вижу проблемы. Именно так в первую очередь работают фиксированные желоба.
Ответ №1:
Именно так в первую очередь работают фиксированные желоба Singularity.
Чтобы применить фоны к столбцам, не включая их заполнение, используйте подконтейнеры.
Посмотрите эту демонстрацию: http://sassmeister.com/gist/b2d957171427022de7c7
PS Не вкладывайте свой код Sass. Используйте семантические классы для прямого обращения к элементам. Используйте двухуровневую глубину для размещения дочерних элементов внутри родительских элементов, например.:
.parent
.child-1
grid-span(1,1)
.child-1
grid-span(1,2)
Никогда не используйте трехуровневую глубину, если у вас нет действительно-действительно веской причины.