Какой фреймворк предоставляет такую хитрую сетку?

Question

[Morozov_Evgeny]

Вот здесь используется очень хитрая сетка:
tympanus.net/Development/CreativeButtons
Подвигайте ширину браузера. Обратите внимание на синюю строку (ПЕРВАЯ строка кнопок в количестве 3 штук). Увидите, что блоки переносятся по одному.

Такой логики поведения я не увидел ни у Zurb, ни у Bootstrap. Там у них при пересечении самого малого брейкпойнта все блоки выставляются в вертикальный столбец!

Подскажите, может вы знаете фреймворк, который такую сетку предоставляет?

И еще...
Было бы здорово, если будет указан конкретный фреймворк, а не "сам код на css напиши, это же просто!" :)

Comments

[Morozov_Evgeny]

UPD
Но в этом примере кнопки - имеют фиксированную ширину.
Мне требуется более универсальное решение с блоками DIV ширина которых будет ограничена только max-width.
В этом вся соль. Поэтому я и смотрю в сторону фреймворков.

Answer 1

[Alexander Sydorenko]

Кнопки в Вашем примере не зависят от сетки. Они имеют фиксированную ширину, и стиль inline-block, складываются в родительский p с стилем text-align: center;, если не помещаются, перескакивают на нижний ряд. Это _НЕ_ сетка, это обычное поведение inline-block элементов в родителе с diaply:block и text-align: center.

Comments

[Mr_Smitt]

Именно так, тут не задействован framework

[Morozov_Evgeny]

Спасибо за ответ!
Но в этом примере кнопки - имеют фиксированную ширину.
Мне требуется более универсальное решение с блоками DIV ширина которых будет ограничена только max-width.
В этом вся соль. Поэтому я и смотрю в сторону фреймворков.

[Mr_Smitt]

@Morozov_Evgeny: но от одного max-width блоки не догадаются по сколько штук им встать в ряд, думаю вам стоит посмотреть в сторону @media screen

Answer 2

[Рустамка Воронцов]

<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-default">Default</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-default">Default</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-default">Default</button>
</div>
</div>

В bootstrap 3 так они тоже "перенесутся по одному".