Адаптивные колонки

При создании колонок обычно приходится применять специальные CSS-классы к первому и последнему элементу. В этой статье рассказано о небольшом трюке, который упрощает верстку колонок, а также делает их адаптивными.

Суть метода сводится к использованию псевдокласса nth-of-type: количество и ширина колонок меняется на экранах разных размеров (Демонстрация).

Недостатки CSS-классов для первого и последнего элементов

Применять классы .first и .last для колонок в каждой строке для корректного отображения очень утомительно, к тому же возникают проблемы при верстке адаптивно:

Использование 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 начинается с новой строки

.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) для создания трехколоночной сетки

@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.