Обоснованные блоки в сетке Susy

Question

Susy - отличный инструмент, но я чувствую, что столкнулся с его слабостью. Допустим, что я три плавал блоковые элементы в «блоках» контейнер:

Элемент «блок» будет предоставлен «срок (4 из 12)»

<div class="blocks"> 
    <div class="block"> 
     //img and text 
    </div> 
    <div class="block"> 
     //img and text 
    </div> 
    <div class="block"> 
     //img and text 
    </div> 
</div> 

Как я разворачивать окно, содержимое внутри блоков становится слишком большим по моему вкусу, поэтому я добавляю max-width в элемент «blocks». Когда достигается максимальная ширина, я, к сожалению, обнаруживаю, что блоки слишком близко друг к другу ... Поэтому я добавляю максимальную ширину к моим «блочным» элементам ... но это закручивает этот плавающий макет в качестве третьего блока будет поплыть вправо (последний), а первые два будут лежать влево (что вызовет увеличение пространства между 2-м и 3-м элементами с изменением размера).

Я нахожу лучший способ сделать это, установив «text-align: justify» в контейнер «blocks» и «display: inline-block» на мои «блочные» элементы. С помощью этого метода я могу создать макет, где мои элементы блока перестают расти в определенную точку (достигается максимальная ширина блоков), но затем пространство между ними продолжает увеличиваться (обоснованное содержимое).

Для меня это действительно красивый и ценный макет. Я читал много похвал разными людьми о макетах встроенных блоков и Сьюзи. Мне было интересно, ограничена ли Сузи в выполнении такого макета.

Answer 1

У Susy нет ярлыков для создания компоновки встроенного блока (из-за проблем с пространством белого), но реальная сила Susy - это гибкость, чтобы делать все, что вы хотите, используя поставляемые функции. Вы можете сделать что-то вроде этого:

.block { 
    display: inline-block; 
    margin: gutter(of 12); 
    max-width: 14em; // whatever you need 
    width: span(4 of 12); 
} 

Та же идея будет работать с Flexbox, который я нахожу гораздо более мощным, чем встроенный блок - и это дает space-between вариант, который заменит любую потребность для явных желобов или водосточные-переопределение.