Модульная сетка
Пока что мы верстали отдельные блоки, не задумываясь о модульной сетке страницы. Под модульной сеткой обычно понимают некий основной каркас, который уже наполняется прочими блоками.
Рассмотрим достаточно типовой пример модульной сетки, состоящей из шапки, контента, правого сайдбара и подвала.
Рассмотрим несколько приёмом верстки, как это можно сделать.
Понятие контейнера
У любого сайта корневой элемент всегда BODY, поскольку выше него нет тэгов значимого содержимого. По своей сути BODY — это фон браузера. По умолчанию он белый, то ты можешь его изменить на какой-то другой.
... <body class="bg-yellow100"> ...
После BODY можно поставить основной контейнер и уже в нём разместить остальное содержимое:
...
<body class="bg-yellow100">
<div class="bg-blue200"> <!-- основной контейнер -->
<div>Шапка</div>
<div>Контент</div>
<div>Сайдбар</div>
<div>Подвал</div>
</div>
</body>
...
Почему мы вообще используем контейнер?
Главная причина — это то, что все блоки по умолчанию занимают 100% ширины. Но это некрасиво смотрится, поэтому нужно ограничить ширину сайта, например до 1200px.
Это значение подходит для большинства современных мониторов и хорошо согласуется с физическими размером сайта (примерно лист A4).
Таким образом контейнер нам нужен не только для flex-сетки, но для ограничения ширины.
Вторая причина — это возможность задать фон браузера другим, нежели фон сайта. Например фон браузера будет темным, а контейнера — светлым.
Ограничение ширины контейнера
Этот приём вёрстки ты будешь использовать часто, поэтому хорошо с ним разберись.
.layout-center {
width : 100%;
max-width : 1200px;
margin-right: auto;
margin-left : auto;
}
В классе layout-center ширина блока 100% (width), но при этом мы ограничиваем ему максимальную ширину в 1200px (max-width).
Свойство margin может иметь специальное значение auto, которое указывает на то, чтобы браузер сам подобрал размер отступа. И браузер использует всё пустое пространство. Но, поскольку у нас заданы отступы и справа, и слева, то он поделит его пополам. Таким образом блок окажется отцентрирован!
Это старый приём, который очень часто используется при вёрстке. Ты наверное удивишься, но в CSS нет свойства для выравнивания блока по центру (как для текста). Сейчас для этого может использовать flex, но до его появления придумали именно такой способ, который до сих пор актуален.
Нужно учитывать, что блок будет центрирован только, если у него указана ширина. Без неё браузер не сможет правильно рассчитать расстояния.
Что в итоге? Правильно — layout-center позволяет центрировать блок по центру браузера или любого другого блока. Посмотри этот пример в Berry Builder.
<div class="bg-yellow200 pad20">
<div class="bg-blue200 w600px-max" style="margin-right: auto; margin-left: auto;">Блок по центру</div>
</div>
Свойство margin на самом деле составное. Здесь мы используем отдельные свойства для left и right, но запись можно сократить так:
margin: 0 auto; Это тоже самое, что и margin-top: 0; margin-bottom: 0; margin-right: auto; margin-left: auto;
Если же все стороны имеют разные значения, то можно и так:
margin: 0 10px 20px 30px; Это тоже самое, что и margin-top: 0; margin-right: 10px; margin-bottom: 20px; margin-left: 30px;
Порядок запомнить довольно просто. Представь себе стрелочные часы, где ход стрелки указывает направление: 12 (top), 3 (right), 6 (bottom), 9 (left). Аналогично работают сокращения и для padding.
Понятие wrap-блока
С классом layout-center блок может иметь свой фон, но он будет всегда располагаться на фоне браузера (BODY или своего родителя). А что если нам нужно задать свой фон, отличный от браузерного на всю ширину, но при этом оставить ограничение ширины контента?
Для этого используется другой приём — использование wrap-блока — это когда вместо одного div-блока размещают сразу два непосредственно друг за другом.
<div class="layout-center-wrap">
<div class="layout-wrap">
содержимое
</div>
</div>
Здесь layout-wrap полностью совпадает по поведению с layout-center, а layout-center-wrap работает как обычный div-блок, то есть растягивается на всю доступную ширину.
<div class="layout-center-wrap bg-red200 pad20">
<div class="layout-wrap bg-yellow200">
содержимое
</div>
</div>
Этот пример обязательно посмотри в Berry Builder и при этом поиграй шириной браузера.
Вёрстка с общим контейнером
Вернись ещё раз к началу страницы и посмотри на схему расположения элементов: всё в одном общем контейнере.
<div class="layout-center-wrap bg-blue200">
<div class="layout-wrap flex flex-wrap">
<div class="bg-yellow200 w100 mar10-b pad20">Шапка</div>
<div class="bg-yellow200 w60 mar10-b pad20">Контент</div>
<div class="bg-yellow200 w35 mar10-b pad20">Сайдбар</div>
<div class="bg-yellow200 w100 mar10-b pad20">Подвал</div>
</div>
</div>
Посмотри этот код в Berry Builder'е. Это обычная flex-сетка, где каждый блок является значащей ячейкой.
Такая схема применяется для того, чтобы визуально объединить все блоки в один с помощью общего бордюра или тени (указывается у wrap-блока). Также эта схема применяется, если нужно сделать «плавающие» блоки — когда фон браузера отличается от блоков содержимого и часто добавляют тень к каждому блоку.
Вёрстка раздельными контейнерами
Присмотрись ещё раз внимательно на схему и ты увидишь, что блоки шапки и подвала имеют 100% ширину. То есть по сути flex-сетка нужна только для того, чтобы разместить блоки контента и сайдбара.
Поэтому, если фон браузера белый и не нужен единый визуальный блок, то можно сверстать каждый блок отдельно.
<div class="layout-center-wrap">
<div class="layout-wrap">
Шапка
</div>
</div>
<div class="layout-center-wrap">
<div class="layout-wrap flex">
<div>Контент</div>
<div>Сайдбар</div>
</div>
</div>
<div class="layout-center-wrap">
<div class="layout-wrap">
Подвал
</div>
</div>
Хорошая новость в том, что 90% сайтов верстаются именно по такой схеме. Она намного удобней, чем общий контейнер, поскольку каждый блок верстается индивидуально, а значит их можно менять между собой, не затрагивая остальные.
Модульная сетка
Теперь поговорим о том, почему это важно. Когда начинаешь верстать страницу, то первое, что ты должен знать — будет ли вёрстка в общем контейнере, или каждый блок можно делать отдельно. Ответ напрямую зависит от дизайна заказчика. Если ты сверстаешь отдельными блоками, а заказчик хочет общий фон или общую тень, то тебе придётся много переделывать, поскольку общая модульная сетка задаёт поведение своих блоков.
При этом всегда нужно учитывать и поведение блоков. Например если клиент по дизайну хочет общую тень, но при этом шапку на всю ширину браузера, то заранее продумай такую модульную сетку и её поведение.
Когда верстается лендинг (там нет сайдбара), то как правило используются раздельные блоки, которые могут иметь совершено разное поведение и дизайн. Но если ошибиться, то опять придётся переделывать. Это часто случается, если используется общий контейнер, а какой-то внутренний блок вдруг нужно растянуть на всю ширину браузера (что часто используется в лендингах).
Ещё раз. Запомни: любая верстка начинается с построения модульной сетки.
Семантика
У тебя может возникнуть вопрос, касаемый семантики, о которой мы говорили ранее. Не нужно ли для блока контента использовать ARTICLE, а не DIV, а для сайдбара ASIDE? Ответ — нет.
Дело в том, что модульная сетка — это чисто техническое «сооружение» и не может являться семантичной. Более того, тот же блок контента может содержать и другие технические блоки, которые необходимы для реализации дизайна. Поэтому ARTICLE, ASIDE и другие должны быть как можно ближе к основному содержимому. Не нужно их забивать техническими тэгами.
Задания
1. Найди прошлые уроки про космос и переверстай их с использованием layout-классов, чтобы контент размещался по центру браузера.
2. Добавь на страницу шапку так, чтобы она центрировалась, но занимала всю ширину браузера и имела сплошной цвет, например bg-blue700, а текст был t-white. Добавь отступы, центрирование, то есть так, чтобы шапка страницы стала привлекательной.