Jump to content

Макет: сетки

Модуль сетки предоставляет классы для построения макетов, основанных гибкой 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>

Будет визуализировано как:

Span 3
Span 3
Span 4
Span 2

Классы сетки 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>
Span 6
Span 6
Span 6
Span 6

Для сеток, у которых элементы могут иметь разную ширину или высоту, рассмотрите использование виджета 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 одинаковыми по высоте, не зависимо от их содержимого.