Друзья, сегодня открываю новую категорию Уроки CSS. И первая статья будет о Responsive design, адаптивном дизайне, который сейчас так часто используется во многих шаблонах WordPress.
Обычно, чтобы создать структуру столбцов, нужно добавить первые или последние классы для того, чтобы сбросить расстояние отступов и сдвиг. Сегодня я поделюсь очень простым приемом в CSS, который позволяет создать адаптивную структуру столбцов, используя псевдо-класс nth-of-type.
Я использую этот прием для создания многих тем WordPress. Он не требует классов .first или .last, и количество колонок может быть изменено в зависимости от окна просмотра. Другими словами, его можно изменять от 4-колоночного до 3-х или 2-х, и так далее.
Неудобство использования классов first и last
Обычно мы добавляем классы .first или .last для того, чтобы сбросить расстояние отступов и сдвиг. Добавление первого и последнего класса – утомительная процедура, не говоря уж о том, что задача усложняется, если вам нужно сделать столбцы адаптивными.
Выражение :nth-of-type(An+B) позволяет легко сбросить расстояние и изменить его без необходимости добавления классов .first или .last. Например:
- .grid4 .col:nth-of-type(4n+1) = использовать каждый четвертый .col элемент, начиная с первого
- .grid3 .col:nth-of-type(3n+1) = использовать каждый третий .col элемент, начиная с первого
- .grid2 .col:nth-of-type(2n+1) = использовать каждый второй .col элемент, начиная с первого
1 2 3 4 5 6 |
.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)
Чтобы добиться адаптивности и плавности, используйте величину в процентах, вместо пикселей.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* колонки */ .col { background: #eee; float: left; margin-left: 3.2%; margin-bottom: 30px; } /* grid4 4 колонки */ .grid4 .col { width: 22.6%; } /* grid3 3 колонки */ .grid3 .col { width: 31.2%; } /* grid2 2 колонки */ .grid2 .col { width: 48.4%; } |
Переход дизайна от четырех столбцов к трем
Чтобы перейти от 4 колонок к 3 колонкам при ширине окна просмотра меньше, чем 740 пикселей:
- Измените ширину .grid4 .col до 31.2% (треть ширины)
- Сбросьте левый отступ и очистите свойства
- Затем примените еще раз левый отступ и очистите свойства используя nth-of-type(3n+1), чтобы образовать сетку из трех столбцов
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@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; } } |
Переход от четырех и трех колонок к двум
Чтобы перейти от четырех и трех колонок к двум при ширине окна просмотра, меньшей чем 600 пикселей: в принципе, мы используем такой же прием, как тот, что был описан выше, чтобы сбросить ширину и сдвиг .col.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
@media screen and (max-width: 600px) { /* меняем grid4 на 2 колонки */ .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; } /* меняем grid3 на 2 колонки */ .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; } } |
Выровнять все столбцы по ширине
Чтобы выровнять все столбцы по ширине в окне обзора шириной меньше, чем 400 пикселей: установите ширину в 100% и сбросьте отступ и сдвиг.
1 2 3 4 5 6 7 |
@media screen and (max-width: 400px) { .col { width: 100% !important; margin-left: 0 !important; clear: none !important; } } |
Проблемы с Internet Explorer
И медиа-запросы, и псевдо-класс nth-of-type не поддерживаются Internet Explorer 8 или выше. Можно использовать selectivizr.js, чтобы обеспечить поддержку nth-of-type для Internet Explorer и respond.js для медиа-запросов. К сожалению, selectivizr.js и respond.js не очень хорошо работают вместе (то есть, псевдо-класс nth-of-type не работает в пределах медиа-запросов). Это означает, что единственная проблема с адаптивной сеткой заключается в том, что невозможно перейти от четырех столбцов к трем или двум.
Отличный пост — то, что искал. Без воды и все по делу!
Можете подсказать — у меня при разрешении меньше 750px сайдбар смещается вниз и устанавливается ширина 300px хотя в этих 750px мог бы влезть сайдбар в две колонки. Как это реализовать? Подскажите, если знаете.
вам нужно исследовать css свойства(например с помощью google chrome — просмотр кода элемента) ваших html блоков: margin, padding, float, clear а также приоритета !important при нужном разрешении а не только ориентироваться на свойство width. Тогда вы сможете увидеть причину и поправить css/html код
Добрый день!
А как вывести произвольные поля в две колонки?
Подозреваю, что нужно вставить в .css что-то типа
img:nth-of-type(2n+1) { float: left; }
img:nth-of-type(2n) { float: right; }
А что именно, не знаю. Буду благодарна за помощь
Спасибо за статью, очень познавательно 🙂
http://aterr.net/adaptivnaya-setka-pri-pomoshhi-vyravnivaniya-text-align-justify
В свою очередь хочу поделиться на “другое” решение адаптивности сеток. Не так давно, пытаясь найти подходящее решение для реализации адаптивной сетки, наткнулся на одну статью, в которой рассказывается как добиться адаптивной сетки при помощи text-align: justify.
Ссылку вбрасываю, может кому из ваших читателей пригодится.