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

Сегодня я хочу поделиться очень простым 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).




Источник