Требуется адаптивная сетка вывода портфолио. Данные будут поступать посредством PHP в виде массива, после чего перебраться циклом.
Необходимо средствами jquery и css, преобразовать следующую разметку:
<div id="modul_obekti">
<div class="obekt"><div class=”img_obekta”>тут будет картинка</div></div>
<div class="obekt"><div class=”img_obekta”>тут будет картинка</div></div>
<div class="obekt"><div class=”img_obekta”>тут будет картинка</div></div>
<div class="obekt"><div class=”img_obekta”>тут будет картинка</div></div>
<div class="obekt"><div class=”img_obekta”>тут будет картинка</div></div>
<div class="obekt"><div class=”img_obekta”>тут будет картинка</div></div>
<div class="obekt"><div class=”img_obekta”>тут будет картинка</div></div>
<div class="obekt"><div class=”img_obekta”>тут будет картинка</div></div>
<div class="obekt"><div class=”img_obekta”>тут будет картинка</div></div>
<div class="obekt"><div class=”img_obekta”>тут будет картинка</div></div>
<div class="obekt"><div class=”img_obekta”>тут будет картинка</div></div>
<div class="obekt"><div class=”img_obekta”>тут будет картинка</div></div>
</div>
В сетку с максимальным числом колонок:
4 колонки от 1440px до 1920px (ширина каждой колонки вcss 25%);
3 колонки от 960px до 1440px (ширина каждой колонки в css 33.3%);
2 колонки от 480px до 960px (ширина каждой колонки в css 50%);
1 колонка до 480px (ширина колонки в css 100%);
Отступы 24px. Содержимое сеток должно масштабироваться пропорционально.
Основное требование:
Блоки будут вперемешку, как вертикальные, так и горизонтальные;
Один вертикальный блок должен четко состоять из 2-х горизонтальных блоков (пример прикладываю);
Сетка внизу должна быть без ступенек.
