Шаг 1. Строим сетку для блоков первого уровня

На этом шаге выстраиваем по сетке крупные блоки первого уровня:

1. шапка,

2. подвал,

3. основной контент.

Как правило, тип отображения для этих блоков не меняют. Блоки идут друг под другом и display: block для этого подходит идеально.

Сетка блоков первого уровня

Блоки на примере тянутся на всю ширину браузера — это поведение по умолчанию для блочных боксов.

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

.main-header { margin-bottom: 75px; /* … */}.main-footer { padding-top: 25px; padding-bottom: 25px; text-align: center; /* … */}

Замечание

Шаг 2. Добавляем контейнер-центровщик для выравнивания содержимого

В случае, если содержимое сайта имеет фиксированную ширину и центрируется, можно использовать дополнительный контейнер для задания нужного поведения. Такой контейнер ещё называют «центровщиком». Это типовой способ для выравнивания содержимого сайта. Контейнер-центровщик легко распознать на макете.

Рассмотрим пример. Содержимое в шапке, в блоке бестселлеров, в промо-блоке и в блоке категорий товаров имеет фиксированную ширину и выровнено по центру. Реализуем такое поведение с помощью контейнера-центровщика.

Центровка блоков

Добавим в разметку контейнер-центровщик — <div> с классом container. Зададим ему фиксированную ширину, центровку с помощью внешних отступов и небольшие внутренние отступы. При определении размеров руководствуемся макетом.

.container { width: 1170px; margin: 0 auto; padding: 0 28px;}

Шаг 3. Выстраиваем горизонтальные блоки

Это могут быть колонки в сетке, элементы горизонтального меню, элементы управления в плеере, карточки товаров, фильтры в каталоге и так далее. Разберём всё на примерах.

Пример 1

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

Сетка шапки сайта

<header class="main-header"> <div class="container"> <nav class="main-navigation"> <a href="index.html"><img src="img/logo.svg" height="30" alt="Логотип"></a> <ul class="site-navigation">…</ul> </nav> <ul class="user-navigation">…</ul> </div></header>

В контейнере-центровщике выстраиваем блоки.main-navigation и.user-navigation в ряд с помощью display: flex. Эти блоки относятся к крупной сетке.

Блокам в такой сетке важно ограничить или зафиксировать ширину. Почему? Может измениться количество пунктов меню или размеры логотипа. Сетка должна предусматривать эти изменения и не должна сломаться. Подробно про переполнение мы поговорим позже в 5 шаге методики.

Сетка шапки сайта

Для главной навигации укажем ширину 800px. Зададим ширину для навигации по сайту 445px.

Блоки в контейнере выровнены по ширине, поэтому используем тип выравнивания по главной оси justify-content со значением равным space-between. Чтобы получить это же выравнивание блоков, можно использовать автоматический внешний отступ слева для блока с пользовательской навигацией.

Внутри блока с главной навигацией между логотипом и навигация по сайту отступ равный 265px. В стилях укажем внешний отступ слева для блока с навигацией по сайту. Значение ширины для блоков и отступы мы замерили в макете.

Собираем всё вместе и получаем такие CSS-правила:

.main-header.container { display: flex; justify-content: space-between;} /* альтернативный вариант */.main-header.container { display: flex;}.user-navigation { margin-left: auto;} /* ещё один альтернативный вариант */.main-navigation { display: flex; width: 800px;}.site-navigation { width: 445px; margin-left: 265px;}

Пример 2

Построим сетку для типичного информационного раздела сайта с текстом и картинкой.

Содержимое раздела выстроено в две колонки. Ширина первой колонки 670px, второй — 500px. Для того чтобы два блочных элемента выстроить в ряд, используем display: flex, направление главной оси флексбокса оставим по умолчанию. Колонки выровнены по ширине, поэтому укажем тип выравнивания по главной оси justify-content равным space-between.

Сетка информационного блока

И для нашей разметки:

<section class="symptoms"> <div class="container"> <div class="column1"> <h2>Что из этого списка вы находите у себя?</h2> … </div> <div class="column2"> … </div> </div></section>

Получаем следующие CSS-правила:

.symptoms.container { display: flex; justify-content: space-between;}.column1 { width: 670px;}.column2 { width: 500px;}

Пример 3

Псевдоэлементы::before и::after для тега с display: flex ведут себя также как и флекс-элементы внутри флекс-контейнера.

Рассмотрим пример. Необходимо построить сетку для блока с номером телефона и выстроить в ряд два блока: изображение телефона и текст с номером.

Сетка блока с номером телефона

Изображение телефона — это декоративное изображение и может быть добавлено на страницу с помощью псевдоэлемента before для тега <a>.

Разметка элемента с номером телефона будет выглядеть так:

<a href="tel:[phone]">8 800 000-00-00</a>

Стили для оформления номера телефона:

a::before { content: ""; width: 30px; height: 30px; background-image: url("img/phone.svg");}

Если указать для тега <a>display: flex, то изображение телефона и номер выстроятся в ряд, что и требуется в макете.