Сайт-визитка

от 14 000 рублей

Каталог

от 19 000 рублей

Магазин

от 30 000 рублей

Адаптивная сетка на Views только с помощью CSS

Часто на сайте требуется вывести данные в виде сетки — это могут быть товары в магазине, каталоги товаров и услуг или просто фотографии в альбоме. Обычное решение — использовать сетку (grid), но на самом деле это таблица и ни о какой адаптивности не может быть и речи. Можно использовать бесполезный, на наш взгляд, модуль Views Responsive Grid или переопределять шаблоны, но это не самые быстрые варианты.

При этом результат можно получить буквально в несколько строчек CSS и с минимумом настроек Vies: задаем формат «Неформатированный список» (Unformatted list)  и получаем стандартнынй вывод — обертку с классом view-content и элементы с классом views-row и используем CSS подобного вида для каждого из нужных диапазонов размеров экрана:

 @media all and (max-width:960px) and (min-width: 768px){
  .views-row{
    float: left;
    width: 33.333%;
    max-width: 33.333%;
  }
  .views-row:nth-child(3n+1){
    clear: left;
  }
}

В данном случае у нас настройка в три колонки. Первое правило задает их ширину, а второе — отключает обтекание у первой ячейки нового ряда.