Новая сетка на inline-block: описание, пример использования, плюсы и минусы

Для современной верстки использование сетки не новость. Практически все html-фреймвоки используют ту или иную сетку. Я встречала 3 вида сетки:

• сетка на float;
• сетка на inline-block;
• сетка на flexbox.

Сетка на inline-block имеет свои особенности, плюсы и минусы, которые следует рассмотреть.

Введение

Сетка, в которой для расположения элементов в ряд используется свойство float: left или float: right используется в большинстве html-фреймвоках (Foundation, Bootstrap и пр). У нее есть свои плюсы и минусы. Думаю, она популярна потому, что была первым достойным решением после табличной верстки, а также поддерживается старыми браузерами. Однако работая с ней я встретила в ней по крайней мере 2 существенных недостатка.

1. У элемента с заданным свойством float отсутствует высота и поэтому тяжело выровнять дочерние элементы по вертикали.
2. Если несколько элементов с свойством float расположены по горизонтали в один ряд и предыдущий элемент (пусть это элемент А) имеет большую высоту, чем последующие (элементы В), то при переходе на следующую сточку один из элементов В может «зацепится» за элемент А и не попасть в начало строки. В фреймвоках эта проблема решается наличием элемента-строки (в Bootstrap — это класс row), но тогда нужно четко знать, сколько элементов будет в ряду. А если товары на странице категории выводятся в цикле и на десктопе они должны располагаться по 5 в ряд, а на мобильном — по 3?

Эти недостатки привели меня к поиску других решений. Естественно, хорошим решением есть сетка с использованием flexbox, которая позволяет гибко настроить расположение элементов внутри контейнера. Ее главным недостатком есть поддержка только современными браузерами. Но хотелось попробовать и другие решения. Прочитав несколько статей об использовании элементов со свойством display: inline-block для выравнивания элементов и расположении в ряд, я принялась искать сетку на inline-block. Однако ничего готового для использования в проектах я не нашла. Только отдельные заготовки. Поэтому, я решила сама создать такую сетку. Для именования классов я использовала методологию БЭМ (Блок-Элемент-Модификатор). Итак, давайте рассмотрим что получилось.

Брейкпоинты и нормализация тегов

В сетке используются следующие брейкпоинты (контрольные ширины браузера, при которых меняется расположение блоков) и префиксы для них:

• xs: 480рх,
• sm: 768рх,
• ms: 1024рх,
• md: 1280рх,
• lg: 1440рх,
• mg: 1680рх.

Для сетки используется минимальная нормализация элементов, необходимых для корректного отображения контента:

* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}
html {
	font-size: 10px;
}

Однако можно использовать ее вместе с другими библиотеками (Reset.css, Normalize.css и пр). В сетке также все размеры указаны в единицах rem, которые относительны шрифту элемента html. Поэтому для масштабирования шрифт html на разных брейкпоинтах меняется:

@media (max-width: 1680px) {
	html {
		font-size: 9.5px;
	}
}
@media (max-width: 1440px) {
	html {
		font-size: 9px;
	}
}
@media (max-width: 1280px) {
	html {
		font-size: 8.5px;
	}
}
@media (max-width: 1024px) {
	html {
		font-size: 8px;
	}
}
@media (max-width: 768px) {
	html {
		font-size: 8.5px;
	}
}
@media (max-width: 480px) {
	html {
		font-size: 7px;
	}
}

В сетке по умолчанию используется 24 колонки и следующие отступы между блоками: 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50. По поводу отступов следует объяснить. Отступ, скажем, 15 — это не 15рх! Это означает, что на ширине браузера 1920рх (которую я принимаю как отправную точку, поскольку для этой ширины чаще всего создается дизайн сайта) отступ блока с одной стороны будет 15рх. А учитывая, что шрифт html на этой ширине равен 10рх, то отступ в сетке задается как 1.5rem. На меньшей ширине шрифт html будет меньше и отступы тоже уменьшатся.

Брейкпоинты, количество колонок, отступы и стартовый шрифт html можно изменить в SASS-версии сетки и сгенерировать нужную для проекта сетку.

Основные блоки сетки

В сетке я использую 3 основных блока:

• класс grid — для обозначения внешнего блока;
• класс box — для обозначения дополнительного блока внутри grid;
• класс cell — для обозначения внутренних блоков внутри grid или box.

Итого, сетка имеет такую структуру:

<div class="grid">
	<div class="box">
		<div class="cell">Элемент 1</div>
		<div class="cell">Элемент 2</div>
		<div class="cell">Элемент 3</div>
	</div>
</div>

Или такую:

<div class="grid">
	<div class="cell">Элемент 1</div>
	<div class="cell">Элемент 2</div>
	<div class="cell">Элемент 3</div>
</div>

Если так, то сразу напрашивается вопрос: А зачем тогда дополнительный блок box? Блок box может быть только одним внутри grid и необходим, если нужны отступы между внутренними блоками или выравнивание внутренних блоков.

Модификаторы блока grid

Блок grid имеет следующие модификаторы:

• grid--size применяется в случае, если ширина блока фиксирована и на каждом брейкпоинте она равна ширине предыдущего брейкпоинте. Например, если ширина браузера 1366рх, и в блоке grid указать модификатор grid--size, то блок будет иметь ширину 1280рх и будет располагаться по средине.
• grid--st, grid--sm, grid--ms, grid--md, grid--md, grid--mg — применяется если нужно, что бы ширина, начиная с какого-то брейкпоинта, была фиксирована, а до этого блок будет распространяться по всей ширине. Например, если использовать модификатор grid--md, то на ширинах меньше 1280рх блок будет иметь ширину 100%, а начиная с ширины 1280рх будет равен этой ширине.
• grid--col24 применяется, если нужно использовать колонки указанной ширины. Поскольку можно сгенерировать несколько-колоночную сетку (например, 24 колонки и 35 колонок), то можно использовать модификаторы grid--col24 и grid--col35. Первый даст возможность располагать элементы по 2, 3, 4, 6, 12 в ряд, а второй — по 5 и 7 в ряд. Это бывает нужно, если в дизайне используется различное число колонок.
• grid--g10, grid--v10, grid--gv10 задают отступы между внутренними блоками (cell) соответственно только по горизонтали, только по вертикале и в обоих направлениях. Цифра в конце (в данном случае 10) указывает на ширину отступа с одной стороны. Например, если мы хотим отступы между внутренними блоками в 3rem только по горизонтали, то внешнему блоку нужно задать модификатор grid--g15. Однако тут есть 2 тонкости:
  1. По горизонтали блок может иметь одинаковые отступы и справа, и слева, в то время, как по вертикале делается двойной отступ снизу. Это сделано для удобства, поскольку в основном первый блок начинается сверху без отступа, а блоки, идущие снизу должны отделяться от него отступом;
  2. Отступы делаются только внутри между внутренними блоками, а снаружи они плотно прилегают к внешнему блоку.

Модификаторы блока box

Блок box имеет следующие модификаторы:

• box--left, box--right, box--center, box--justify используется, если нужно выровнять колонки по горизонтали соответственно слева, справа, по центру и по всей ширине.
• box--top, box--bottom, box--middle используется, если нужно выровнять колонки по вертикале, соответственно сверху, снизу и по центру.

Модификаторы блока cell

Блок cell имеет следующие модификаторы:

• cell--none, cell--auto, cell--full задают как будет отображается внутренний блок по умолчанию: будет скрыт, иметь собственную ширину или распространяться на всю ширину родителя;
• cell--col1, cell--col2, cell--col3 и т. д. задают конкретную начальную ширину внутреннего блока. Например, модификатор cell--col2 означает, что блок будет занимать 2 колонки;
• cell--st5, cell--xs10, cell--md15 и т. д. ширину внутреннего блока на определенном брейкпоинте. Например, модификатор cell--md15 означает, что ширина блока будет составлять 15 колонок при ширине экрана < 1280px (md).
• cell--left, cell--right, cell--center, cell--justify задают выравнивание элементов нутри блока по горизонтали соответственно слева, справа, по центру и по всей ширине;
• cell--top, cell--bottom, cell--middle задают выравнивание по вертикале, соответственно сверху, снизу и по центру. Однако следует учесть, что поскольку внутренние блоки имеют свойство display: inline-block, то по вертикале они выравниваются относительно друг друга, а не родителя! Поэтому, чтобы выровнять в блоке по вертикали, например, по центру, нужно обоим блокам поставить модификатор cell--middle.

Пример применения модификаторов

Следующий участок кода показывает, как могут применяться различные модификаторы вместе:

<div class="grid grid--col24 grid--size grid--gv15">
	<div class="box box--middle">
		<div class="cell cell--none cell--md8 cell--sm24">
			Элемент 1
		</div>
		<div class="cell cell--none cell--md8 cell--sm24 cell--center">
			Элемент 2
		</div>
		<div class="cell cell--none cell--md8 cell--sm24 cell--right">
			Элемент 3
		</div>
	</div>
</div>

Заключение

Исходные файлы сетки и пример ее использования можно смотреть тут. Обратите внимание, что в репозитории есть файл grid-inline-block.css с скомпилированной сеткой с указанными выше параметрами. Но также имеется и файл grid-inline-block.scss, используя который можно скомпилировать свой вариант сетки.

Созданная сетка имеет свои плюсы:

1. Решает проблемы с сеткой на float и делает по сути то же самое.
2. В отличии от сетки на float может выравнивать элементы по вертикале, а также задавать разное количество колонок или разные отступы.
3. В отличии от сетки на flexbox поддерживается и более старыми браузерами, например, ИЕ9 и старыми версиями Android.
4. Позволяет внутренние блоки скрывать или показывать на нужной ширине экрана.
5. Имеет интересную способность выравнивать элементы по вертикале относительно друг друга. Это бывает полезным для пунктов меню.
6. Большое количество внутренних блоков с разными модификаторами могут находится в пределах одного внешнего блока и они друг другу мешать не будут
7. Позволяет создавать бесконечную вложенность внешних блоков.

Однако сетка и не лишена недостатков. Вот некоторые из них:

1. При задании последнему внешнему блоку (например, подвалу сайта) модификаторов grid--v10 или grid--gv10 (10 — это для примера), то есть которые задают вертикальный внутренний отступ, то этот последний блок не будет прижат к низу страницы. Это связано с тем, что отрицательный margin-bottom, который тут используется не работает в сочетании с нижней границей body. Решить эту проблему можно просто не задавая указанный модификаторы последнему блоку.
2. Хоть сетка и имеет некоторую гибкость в выравнивании внутренних блоков, но ей не сравнится в этом с flexbox.
3. Если по каким-то причинам внутренний блок стал больше по ширине, чем то место, что ему было отведено (такое может произойти, если не задавать конкретную ширину внутренним блокам, а ограничится только классом cell), то этот блок перескочит на новую строчку, что часто не желательно. Поэтому такие моменты нужно продумывать сразу.

Не могу сказать, что эта сетка лучше всех и что все ее должны использовать. Но думаю, она имеет право на существование наряду с другими.

Автор: babenkoma

Источник