Одинадцатый урок. Модульная сетка

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

У любой модульной сетки корневой элемент — это тэг BODY, то есть окно браузера. При постоении сетки необходимо это учитывать.

Рассмотрим достаточно типовой пример модульной сетки, состоящей из шапки, контента, правого сайдбара и подвала.

BODY (браузер)
Основной контейнер
Шапка
Контент
Сайдбар
Подвал

Здесь основной контейнер отцентирирован по окну браузера (BODY) и имеет ограничение на максимальную ширину. В UniCSS по умолчанию это 992px. Это достаточно типовое значение, но в будущем мы научимся его менять.

Если же реальная ширина браузера будет меньше, чем 992px, например на планшете, то основной контейнер будет занимать 100% ширины браузера без появления горизонтальной полосы скролинга.

В FireFox нажмите Ctrl+Shift+M, чтобы попасть в режим тестирования адаптивного дизайна и в нём покрутите ширину экрана. Вы увидите поведение основного контейнера.

В данной модульной сетке основной контейнер ограничивает ширину всех внутренних блоков. То есть ни шапка, ни подвал никогда не смогут выйти за пределы основного блока. В свою очередь, основной блок может использоваться для настройки дизайна, например задавать тень, фон или границу. Часто ему прописывают дополнительные отступы от границ браузера.

Таким образом, перед тем, как верстать страницу, необходимо сразу определиться с модульной сеткой — будет ли она ограничивающей для всех блоков страницы, или нет. От этого будет зависеть вся дальнейшая вёрстка.

Второй вариант модульной сетки базируется на предыдущей, но не использует общий контейнер для всех элементов. В такой сетке, все блоки, которые могут иметь 100% ширину браузера верстаются отдельно.

BODY (браузер)
Шапка
Контент
Сайдбар
Подвал

Здесь контейнер задается только для блоков контента и сайдбара, а шапка и подвал растянуты на всю ширину браузера. То есть поведение этих блоков полностью определяется этими блоками.

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

В своей практике вы будете встречаться с обоими видами модульных сеток. Важно перед началом верстки определиться с нужным вариантом.

Технически же модульная сетка делается довольно просто. Есть два варианта. Первый — это обычный DIV, который просто ограничивается по ширине.

<div class="layout-center bg-green200 pad20"> layout-блок </div>
layout-блок

Класс layout-center выполняет всю нужную работу.

Другой вариант — использование дополнительного wrap-блока.

<div class="layout-center-wrap bg-yellow200">
	<div class="layout-wrap bg-green200 pad20">
		layout-wrap-блок 
	</div>
</div>
layout-wrap-блок

Здесь блок layout-center-wrap растянут на всю ширину браузера, а layout-wrap центрируется и ограничивается по ширине уже относительно него.

Данный приём очень часто используется, когда нужно растянуть блок на всю ширину браузера, но при этом ограничить и отцентрировать внутренний блок. В этом случае фоновый цвет задается только для контейнера layout-center-wrap. К нему же можно применить и другие визуальные эффекты, например тень или границу.

Блок layout-wrap может являться flex-контейнером для дочерних элементов, например для блоков контента и сайдбара.

Для выравнивания блока на горизонтали используется такой css-код:

margin: 0 auto 0 auto;

Это короткая запись, которая будет эквивалентна:

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

Данная короткая запись указывает значения margin в такой последовательности:

margin: верх право низ лево;

Значения для margin (и других аналогичных свойств, например padding) указываются в px. Если значение нулевое, то единицы можно опустить. Специальное значение auto заставляет браузер рассчитать отступ автоматически. Поскольку они равны слева и справа, то блок окажется выровненным по центру.

Если top=bottom и right=left, то запись можно еще больше сократить:

margin: 0 auto;

Вы будете часто использовать сокращенную запись, поэтому разберитесь с ними досконально. Чтобы запомнить порядок свойств, представьте себе циферблат часов: 12 — 3 — 6 — 9.

Чтобы выравнивание блока сработало, для него необходимо указать ширину. Также, из-за некоторых css-особенностей, выравнивание будет работать только по горизонтали. Чтобы выровнять блок по вертикали, используются другие приёмы, которые мы рассмотрим позже.

Для того, чтобы ограничить ширину блока используется небольшая хитрость:

width: 100%;
max-width: 992px;

То есть задаем 100% с ограничением в 992px. Теперь вы понимаете как работают классы layout-center и layout-wrap:

.layout-center {
    width: 100%;
    max-width: 992px;
    margin-right: auto;
    margin-left: auto;
}

Блок контейнера layout-center-wrap — это обычный блок со 100% шириной:

.layout-center-wrap {
    width: 100%;
}

Класс указывается для того, чтобы семантически выделить html-блок, формирующий модульную сетку и точно определить wrap-блок.

Задания

Задания доступны только после авторизации.