Гибкие сетки в CSS

Главная составляющая адаптивного дизайна — это гибкая сетка, в основе которой лежит разметка с относительной, не фиксированной шириной, что позволяет элементам веб-страницы менять свои размеры, помещаясь в экран любой ширины.

Как правило, при создании такой сетки используются свойства width и max-width. Последнее свойство позволяет задать ограничение (максимальную ширину), чтобы на очень больших дисплеях веб-страница не становилась слишком широкой.

Допустим, вам нужна страница с двумя колонками, одна из которых должна занимать ⅔ ширины окна браузера, а вторая — оставшееся пространство, то есть ⅓ ширины окна. При этом максимально допустимая ширина контейнера, в котором содержатся колонки, — 1180 пикселей. Каким должен быть код HTML и CSS для реализации этой задачи? Приведем пример:

<div class="container">
	<div class="column-2-3">
	</div>
	<div class="column-1-3">
	</div>
</div>

/* Стили для контейнера */
.container {
	width: 100%;
	max-width: 1180px;
}

/* Хак Micro Clearfix */
.container:after {
	content: " ";
	display: table;
	clear: both;
}

/* Стили для колонки шириной ⅔ */
.column-2-3 {
	width: 67%;
	float: left;
}

/* Стили для колонки шириной ⅓ */
.column-1-3 {
	width: 33%;
	float: left;
}

Элемент .container имеет ширину 100%, но с ограничением максимум в 1180 пикселей. Хак для контейнера помогает восстановить потерянную высоту родителя float-элементов. Колонка .column-2-3 имеет ширину, равную ⅔ ширины контейнера. Колонке .column-1-3, соответственно, задана ширина, равная ⅓ ширины контейнера. Обе колонки «плавающие», сумма их ширин не превышает 100%, и потому они располагаются в одном ряду.

Многоколоночный дизайн и порядок HTML

Когда многоколоночный макет для десктопной версии адаптируется под мобильные устройства средствами CSS, чаще всего все колонки складываются в одну. Если сетка создана на основе свойства float, это означает, что в определенной контрольной точке колонкам нужно задать правило float: none, которое отменяет обтекание. Тогда все колонки разместятся одна под другой.

И здесь может возникнуть проблема с порядком расположения HTML-элементов. Представим, что макет имеет три колонки: левая содержит длинный список рекламы, средняя — основной контент, а правая — ссылки на похожие записи. Когда вы отмените обтекание, левая колонка будет отображаться в самом верху, под ней будет находиться средняя колонка, а в самом низу — правая.

Именно так и выглядит порядок вывода HTML-элементов по умолчанию. Но для пользователя смартфона это будет означать, что при попадании на веб-страницу он будет вынужден сначала долго скроллить блок с рекламой, после чего он доберется до того контента, за которым пришел.

Безусловно, посетителю сайта будет намного удобнее видеть основное содержимое страницы в ее начале. Эта проблема может быть решена путем добавления вспомогательного блока-контейнера (мы показывали такой пример в одном из прошлых уроков).

Если вся эта информация вас запутала, просто запомните, что при создании HTML-документа необходимо соблюдать желаемый порядок следования элементов, рассматривая макет как одноколоночный. Откройте готовый HTML-документ без CSS-стилей в браузере — и вы получите представление о том, в каком порядке будет показан контент пользователю смартфона. Разместите основной контент первым, а уже под ним добавьте блоки со второстепенным содержимым. Не волнуйтесь, для многоколоночной версии макета вы можете поменять колонки местами с помощью CSS.

Настройка box-sizing для всей сетки

Когда мы говорили о проблемах float-элементов, то рассказывали о нежелательном поведении колонок, при котором они переносятся на другую строку. Такое часто случается, если одна из колонок в ряду становится хоть на миллиметр шире, чем положено. Как вы помните, по умолчанию в общую ширину элемента входит ширина его содержимого, а также размеры горизонтальных отступов, границ и полей. И если вы захотите добавить отступы padding либо рамку border по бокам колонок, когда они сами по себе занимают абсолютно всю ширину контейнера, то возникнет нехватка места и одна из колонок «вылетит» из своего ряда вниз.

Но с помощью CSS-свойства box-sizing можно управлять алгоритмом расчета размеров элемента: если задать ему значение border-box, то браузер будет включать отступы и границы в общую ширину. Примените данное свойство к элементам сетки либо вообще ко всем элементам (используя селектор *), и тогда вы сможете смело добавлять любые отступы и рамки без страха, что верстка «развалится». Не забудьте продублировать правило с префиксами -moz- и -webkit- — некоторые браузеры требуют их.

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

От фиксированных значений к относительным

Если вы создаете гибкую сетку с нуля, при этом и руководствуясь правильной grid-системой, то с вычислением ширины колонок у вас не должно возникнуть проблем. Однако, если вы переводите уже готовый макет из фиксированного в адаптивный, то ситуация может немного усложниться.

Допустим, имеется двухколоночный макет. Ширина основного контейнера составляет 960 пикселей. Ширина одной колонки — 600 пикселей, второй — 360 пикселей:

.container {
	width: 960px;
}
.main {
	width: 600px;
}
.sidebar {
	width: 360px;
}

Как правильно перевести эти значения из пикселей в проценты? Для начала займемся основным контейнером и перепишем для него стили таким образом:

.container {
	width: 100%;
	max-width: 960px;
}

Далее, для перевода значений ширины колонок из пикселей в проценты необходимо разделить это значение на значение ширины контейнера (в пикселях), а затем полученное дробное число перевести в проценты, умножив его на 100. В случае с нашим примером мы разделим число 600 на 960, получим 0,625. Умножим результат на 100 и получим 62,5. Это и есть процентное значение, которое мы поставим вместо пиксельного:

.main {
	width: 62.5%;
}

Те же самые расчеты проведем для второй колонки: 360 / 960 = 0,375 * 100 = 37,5.

.sidebar {
	width: 37.5%;
}

Обратите внимание, что полученные числа округлять не нужно. В противном случае вы рискуете получить сумму либо более 100 (что приведет к выпадению колонки из ряда), либо менее 100 (что отобразится на внешнем виде макета: он уже не будет идеально соответствовать старому виду, который определялся пиксельными значениями).

Браузер нормально воспринимает дробные значения, несмотря на то, что пиксель не делится, поэтому смело используйте их. В том же Bootstrap можно встретить значения ширины колонок наподобие 33.33333333% и 66.66666667%. Самое главное, помните, что общая ширина всех колонок в одном ряду не должна превышать 100% ни на йоту.

Далее в учебнике: адаптивные изображения и видео.