# 050: Построение сетки галереи - CSS-хитрости

Anonim

Мы начинаем копаться в компоновке области Галереи, о чем я думал с самого начала этого процесса редизайна. В основном потому, что… галерея в v9 отстойная. В этот раз мы добьемся большего успеха.

Мы собираемся сделать макет галереи не чем иным, как большой сеткой изображений. Это то, что есть у других галерей, которые приятно просматривать, так что и так должно быть. Другими словами: без боковой панели, больше изображений.

Мы основываем макет на статье о бесшовной адаптивной фото сетке, которую я написал некоторое время назад. По сути, мы позволяем всем изображениям упасть в виде встроенных блоков в один родительский объект, который использует столбцы CSS3. К счастью, у Compass есть помощники, которые делают это еще проще. Промежутки между колонками и нижним полем.

Чтобы имитировать реальный контент, мы используем рандомизированные Place Kittens в цикле.