Открыть список
Как стать автором
Обновить

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

Разработка веб-сайтовCSS
Перевод
Tutorial
Автор оригинала: Nick La
При создании колонок обычно приходится применять специальные 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.
Теги:колонкиадаптивность
Хабы: Разработка веб-сайтов CSS
Всего голосов 56: ↑51 и ↓5 +46
Просмотры30.3K

Похожие публикации

Веб-разработчик Node.js (backend)
от 100 000 до 180 000 ₽VIAR-Ваш АрхивСанкт-ПетербургМожно удаленно
Веб-дизайнер
от 40 000 до 60 000 ₽uKit GroupМожно удаленно
Веб-разработчик (Frontend)
от 80 000 ₽PlenexyМожно удаленно
Веб-дизайнер
до 150 000 ₽ITSOFTМоскваМожно удаленно
Веб-разработчик
от 110 000 до 130 000 ₽Все КолёсаМожно удаленно

Лучшие публикации за сутки