Модуль сетки предоставляет классы для построения макетов, основанных гибкой 12-ти колоночной сетке, с автоматическими полями и с дополнительными классами для корректного сворачивания макета на устройствах с небольшими экранами.
Использование
Сетка должна быть сделана из элемента оболочки с классом ipsGrid, и прямыми потомками с классами соответствующего размера (указаны ниже). Например:
<div class='ipsGrid'> <div class='ipsGrid_span3'>Span 3</div> <div class='ipsGrid_span3'>Span 3</div> <div class='ipsGrid_span4'>Span 4</div> <div class='ipsGrid_span2'>Span 2</div> </div>
Будет визуализировано как:
Классы сетки ipsGrid_span1 по ipsGrid_span12 доступны для столбцов различных размеров.
Оборачивание элементов сетки
Элементы в сетке будут автоматически обёрнуты в новые строки, предоставляя каждому элементу в сетке использование span одинаковой ширины и высоты, без необходимости вручную создавать новую структуру. Например:
<div class='ipsGrid'> <div class='ipsGrid_span6'>Span 6</div> <div class='ipsGrid_span6'>Span 6</div> <div class='ipsGrid_span6'>Span 6</div> <div class='ipsGrid_span6'>Span 6</div> </div>
Для сеток, у которых элементы могут иметь разную ширину или высоту, рассмотрите использование виджета ips.ui.grid widget.
Адаптивность
Чтобы адаптировать макет сетки на устройства с небольшими экранами, добавьте класс ipsGrid_collapseTablet или ipsGrid_collapsePhone к списку классов элемента оболочки, например так:
<div class='ipsGrid ipsGrid_collapsePhone'> ... </div>
Дополнительно
data-ipsGrid
<div class='ipsGrid' data-ipsGrid> ... </div>
Такая запись позволяет задать одинаковую ширину дочерним ipsGrid_spanX, например, код
<div class='ipsGrid' data-ipsGrid> <div class='ipsGrid_span5'></div> <div class='ipsGrid_span7'></div> </div>
На самом деле будет вот такой:
<div class='ipsGrid' data-ipsGrid> <div class='ipsGrid_span5'></div> <div class='ipsGrid_span5'></div> </div>
То есть все дочерние ipsGrid_span будут такие же, как первый ipsGrid_span.
data-ipsGrid-equalHeights='row'
Выравнивает все дочерние ipsGrid_span по высоте.
<div class='ipsGrid' data-ipsGrid-equalHeights='row'> <div class='ipsGrid_span5'></div> <div class='ipsGrid_span7'></div> </div>
Такая запись сделает все ipsGrid_span одинаковыми по высоте, не зависимо от их содержимого.