Адаптивная многоколоночная верстка

Сегодня я хочу поделиться очень простым CSS-трюком, о том как создать адаптивный многоколоночный макет с использованием псевдо-класса nth-of-type. Он не требует использования никаких классов в первой или последней колонке и количество колонок может быть изменено в зависимости от ширины экрана. Иными словами, макет может быть переключен с 4-колоночного, на 3-колоночный или 2-колоночный и т.д.

Демонстрация

Неудобство использования классов для первой и последней колонки

Обычно мы добавляем классы .first или .last, чтобы очистить края и создать "плавающую" сетку. Добавление первого и последнего класса для большой сетки является довольно утомительным и скучным процессом, не говоря уже о том, что он становится еще более сложным, если вам нужно сделать макет адаптивным.

Адаптивная многоколоночная верстка

Использование nth-of-type

Выражение :nth-of-type(An+B) делает очень легким процес очистки float и margin без необходимости добавлять классы .first или .last. Например:

  • .grid4 .col:nth-of-type(4n+1)= ссылка на каждый 4-й элемент с классом .col, начиная с первого
  • .grid3 .col:nth-of-type(3n+1)= ссылка на каждый 3-й элемент с классом .col, начиная с первого
  • .grid2 .col:nth-of-type(2n+1)= выбирает каждый 2-й элемент с классом .col, начиная с первого

Адаптивная многоколоночная верстка

.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
    margin-left: 0;
    clear: left;
}

Создание адаптивности с применением Media Queries

Чтобы сделать макет адаптивным и "плавающим", используем значения в процентах, вместо пикселей.

/* col */
.col {
    background: #eee;
    float: left;
    margin-left: 3.2%;
    margin-bottom: 30px;
}
/* grid4 col */
.grid4 .col {
    width: 22.6%;
}
/* grid3 col */
.grid3 .col {
    width: 31.2%;
}
/* grid2 col */
.grid2 .col {
    width: 48.4%;
}

Переход с 4-колоночного на 3-колоночный макет

Чтобы изменить 4-колоночный макет на 3-колоночный для окна, ширина которого меньше 740px, необходимо:

  1. Изменить ширину для класса .grid4 .col до 31,2% (одна треть от ширины экрана)
  2. Сбросить левый отступ и свойство clear
  3. Затем повторно установить левый отступ и свойство clear с помощью nth-of-type(3n+1), создав таким образом 3-колоночную сетку

Адаптивная многоколоночная верстка

@media screen and (max-width: 740px) {
    .grid4 .col {
        width: 31.2%;
    }
    .grid4 .col:nth-of-type(4n+1) {
        margin-left: 3.2%;
        clear: none;
    }
    .grid4 .col:nth-of-type(3n+1) {
        margin-left: 0;
        clear: left;
    }
}

Изменение 4-колоночного и 3-колоночного макета на 2-колоночный

Для переключения с 4-колоночного и 3-колоночного макета на 2-колоночный при ширине окна менее, чем 600px: в целом используется тот же трюк, что и выше, сбрасываем ширину для класса .col и свойство float.

@media screen and (max-width: 600px) {
    /* change grid4 to 2-column */
    .grid4 .col {
        width: 48.4%;
    }
    .grid4 .col:nth-of-type(3n+1) {
        margin-left: 3.2%;
        clear: none;
    }
    .grid4 .col:nth-of-type(2n+1) {
        margin-left: 0;
        clear: left;
    }
    /* change grid3 to 2-column */
    .grid3 .col {
        width: 48.4%;
    }
    .grid3 .col:nth-of-type(3n+1) {
        margin-left: 3.2%;
        clear: none;
    }
    .grid3 .col:nth-of-type(2n+1) {
        margin-left: 0;
        clear: left;
    }
}

Делаем столбцы на всю ширину экрана (см.  демо)

Чтобы сделать все столбцы растягивающиеся на всю ширину окна, которое меньше, чем 400px, необходимо: установить ширину 100% и сбросить margin и float.

@media screen and (max-width: 400px) {
    .col {
        width: 100% !important;
        margin-left: 0 !important;
        clear: none !important;
    }
}

Проблемы с Internet Explorer

Свойства media queries and nth-of-type не поддерживаются Internet Explorer 6, 7, 8. Вы можете использовать скрипт selectivizr.js, чтобы обеспечить поддержку свойства nth-of-type в IE и скрипт respond.js для поддержки media queries. К сожалению, selectivizr.js и respond.js не работают хорошо вместе (т.е. nth-of-type не работают в media queries). 

Перевод статьи с webdesignerwall.com


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

You have no rights to post comments