Эластичная сетка колонок веб-сайта

Этот небольшой плагин поможет построить вам настраиваемую сетку элементов с равной шириной, не изучая 960 Grid.

Опции:количество колонок

$('.container').elasticColumns({columns: 3});

Цифра 3 в этом коде, как вы догадались - количество колонок, изменить это количество мы можем позже, используя API.

$('.container').elasticColumns(
{
 innerMargin: 10, // разрыв между контейнерами
 outerMargin: 20 // разрыв между контейнерами и их краями
});

Можете установить отступы (margin) таким способом, если не хотите добавлять стили в CSS.

API

Плагин предоставляет очень простой API:вам нужно будет только:

$('.container').elasticColumns('refresh');

Если пользователь изменит размер окна браузера, сетка должна будет обновиться и принять нужный размер, в итоге мы получим адаптивную сетку блоков.

Меняем количество столбцов, учитываем ширину контейнера.

$('.container').elasticColumns('set', 'columns', 4);

<div class="item elastic-columns-ignore"></div>

добавляем к тем элементам, которые не должны быть в сетке.