При создании колонок обычно приходится применять специальные CSS-классы к первому и последнему элементу. В этой статье рассказано о небольшом трюке, который упрощает верстку колонок, а также делает их адаптивными.
Суть метода сводится к использованию псевдокласса nth-of-type: количество и ширина колонок меняется на экранах разных размеров (Демонстрация).
Применять классы .first и .last для колонок в каждой строке для корректного отображения очень утомительно, к тому же возникают проблемы при верстке адаптивно:
![first-and-last-class](http://koulikov.com/wp-content/uploads/2012/12/first-and-last-class.png)
Выражение :nth-of-type(An+B) помогает очень легко очистить float'ы и отступы элементов, например:
![nth-of-type-columns](http://koulikov.com/wp-content/uploads/2012/12/nth-of-type-columns.png)
Для того, чтобы страница стала адаптивной, используем media queries, все значения в процентах:
Вот как происходит переход с четырехколоночной на трехколоночную сетку при изменении размера окна (менее 740px):
![responsive-columns](http://koulikov.com/wp-content/uploads/2012/12/responsive-columns.png)
Переход с четырехколоночной и трехколоночной на двухколоночную сетку происходит при ширине окна менее 600px:
Для растягивания по всей ширине используем следующий код:
В Internet Explorer версии 8 и младше не поддерживается media queries и nth-of-type. Для решения этой проблемы можно использовать selectivizr.js (фикс nth-of-type) и respond.js (фикс media queries). к сожалению selectivizr.js и respond.js не очень хорошо работают вместе: nth-of-type не будет работать внутри media queries.
Суть метода сводится к использованию псевдокласса nth-of-type: количество и ширина колонок меняется на экранах разных размеров (Демонстрация).
Недостатки использования классов для первого и последнего элементов
Применять классы .first и .last для колонок в каждой строке для корректного отображения очень утомительно, к тому же возникают проблемы при верстке адаптивно:
![first-and-last-class](http://koulikov.com/wp-content/uploads/2012/12/first-and-last-class.png)
Использование nth-of-type
Выражение :nth-of-type(An+B) помогает очень легко очистить float'ы и отступы элементов, например:
- .grid4 .col:nth-of-type(4n+1)— каждый четвертый элемент .col начинается с новой строки
- .grid2 .col:nth-of-type(2n+1) — каждый второй элемент .col начинается с новой строки
![nth-of-type-columns](http://koulikov.com/wp-content/uploads/2012/12/nth-of-type-columns.png)
.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%;
}
Вот как происходит переход с четырехколоночной на трехколоночную сетку при изменении размера окна (менее 740px):
- Меняется .grid4 .col, если ширина становится менее 31,2% (треть всей ширины окна)
- Сбрасывается левый отступ
- Переопределяется левый отступ с помощью nth-of-type(3n+1) для создания трехколоночной сетки
![responsive-columns](http://koulikov.com/wp-content/uploads/2012/12/responsive-columns.png)
@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;
}
}
Переход с четырехколоночной и трехколоночной на двухколоночную сетку происходит при ширине окна менее 600px:
@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;
}
}
Для растягивания по всей ширине используем следующий код:
@media screen and (max-width: 400px) {
.col {
width: 100% !important;
margin-left: 0 !important;
clear: none !important;
}
}
Работа в Internet Explorer
В Internet Explorer версии 8 и младше не поддерживается media queries и nth-of-type. Для решения этой проблемы можно использовать selectivizr.js (фикс nth-of-type) и respond.js (фикс media queries). к сожалению selectivizr.js и respond.js не очень хорошо работают вместе: nth-of-type не будет работать внутри media queries.