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

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

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

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

Применять классы .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.