Блочная верстка: каркас страницы с адаптивной сеткой

Блочная верстка собирает страницу из самостоятельных областей HTML и раскладывает их средствами CSS. Для нового проекта берите семантические теги, CSS Grid для общей схемы и Flexbox для рядов внутри блоков. Рабочий пример из двух файлов поможет собрать страницу, которая перестраивается для телефона без изменения разметки.

Что такое блочная верстка и почему термин остался

Блочная верстка делит страницу на области: шапку, навигацию, основное содержимое, боковую панель и подвал. Блок занимает отдельную строку в нормальном потоке, если его CSS не меняет это поведение.

Термин закрепился при переходе от табличных макетов к CSS. Разработчики собирали области страницы из элементов <div>, задавали ширину и размещали колонки через float. Отсюда привычное учебное название, которое встречается и в современных курсах.

Современная блочная верстка означает семантические блоки, разложенные Grid и Flexbox.

Свойство display определяет участие элемента в раскладке. Значение block заставляет обычный элемент начинаться с новой строки. При автоматической ширине такой блок занимает доступное пространство родителя. Строчный элемент с display: inline располагается внутри текстовой строки.

Например, абзацы идут друг под другом, а ссылки внутри абзаца продолжают текст. Обычной строчной ссылке нельзя задать ширину так же, как блоку. Значение inline-block сохраняет участие в строке, но позволяет задавать размеры.

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

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

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

Из чего состоит скелет страницы

Структура HTML-страницы начинается с декларации типа документа и корневого элемента. Внутри <head> браузер получает кодировку, заголовок вкладки и настройки области просмотра. Внутри <body> идут видимые области страницы.

Декларация <!doctype html> включает стандартный режим отображения документа.

Атрибут lang='ru' у <html> сообщает основной язык страницы. Скринридер использует эту информацию при произношении текста. Метатег charset='utf-8' задает кодировку, поэтому сохраняйте сам файл в UTF-8.

Метатег viewport с width=device-width, initial-scale=1 настраивает область просмотра мобильного браузера. Без него телефон может показывать уменьшенную широкую страницу. Тогда медиазапросы не дадут ожидаемого результата на узком экране.

Подбирайте элементы по назначению содержимого:

• <header> хранит вводную часть страницы или отдельного материала: название, логотип, действия.
• <nav> объединяет основные навигационные ссылки сайта или раздела.
• <main> содержит основное содержимое документа. В обычной странице оставляйте одну видимую основную область.
• <article> подходит для самостоятельного материала: статьи, новости, записи каталога.
• <section> объединяет тематическую часть документа, обычно со своим заголовком.
• <aside> содержит дополнительные сведения, связанные с основным материалом.
• <footer> завершает страницу или материал: хранит контакты, авторство, служебные ссылки.

Название тега не задает место на экране. Боковая панель <aside> может стоять под статьей на телефоне. Элемент <footer> сам по себе не прижимается к нижней границе окна.

Один <div> внутри макета допустим, когда у группы нет собственного смысла: например, для декоративной обертки, сеточного контейнера или объединения элементов формы.

Семантика помогает понимать документ без CSS. Используйте <h1> для главной темы, <h2> для разделов и <h3> для подразделов. Не выбирайте уровень заголовка ради размера шрифта: внешний вид меняет CSS.

В рабочем примере основной материал и дополнительная панель лежат внутри <main>. Нейтральная обертка объединяет их для сетки. Навигация остается отдельным элементом, чтобы получить собственную именованную область.

Блочная модель

Каждый элемент в CSS состоит из области содержимого, внутренних отступов, рамки и внешнего отступа. Содержимое занимает текст или дочерние элементы. padding отделяет содержимое от рамки, border рисует границу, а margin отделяет элемент от соседей.

При стандартном box-sizing: content-box заданная ширина описывает содержимое. Если ширина равна 300px, отступы по 20px и рамки по 1px увеличат наружный размер до 342px. Внешние отступы в этот расчет еще не входят.

Значение border-box включает рамку и внутренние отступы в заданную ширину.

Для того же блока шириной 300px содержимому останется 258px. Такая модель удобна для колонок, полей и карточек: добавление рамки не увеличивает заданный размер. Поэтому правило обычно распространяют на все элементы и их псевдоэлементы.

*,
*::before,
*::after {
  box-sizing: border-box;
}

Универсальный селектор * выбирает элементы документа. Селекторы ::before и ::after добавляют к этому правилу создаваемые через CSS псевдоэлементы. Само свойство box-sizing по умолчанию не наследуется.

Внешние вертикальные отступы обычных блочных элементов могут схлопываться. Два соседних положительных отступа 16px и 24px дадут промежуток 24px. Схлопывание также бывает между родителем и его первым или последним потомком при определенных условиях.

Для отрицательных отступов расчет отличается, поэтому правило «побеждает больший» описывает только положительные значения. Горизонтальные внешние отступы таким образом не схлопываются.

Отступы соседних элементов Grid и Flexbox не схлопываются. Для расстояний между ними удобен gap: промежуток принадлежит контейнеру. Отдельный margin у дочернего элемента добавится к этому расстоянию.

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

Раскладка страницы на CSS Grid

CSS Grid подходит для двумерной схемы: он управляет строками и колонками одновременно. Именованные области делают каркас страницы на HTML и CSS читаемым прямо в таблице стилей.

Сохраните два файла и откройте страницу

1. Создайте отдельную папку для примера. Все его файлы будут лежать непосредственно внутри нее.
2. Сохраните первый листинг в текстовом редакторе как index.html в кодировке UTF-8. Проверьте, что имя не заканчивается на .txt.
3. Сохраните второй листинг рядом как style.css. Имя должно совпадать со значением href в HTML.
4. Откройте index.html браузером. Вы увидите шапку, отдельное меню, материал с дополнительной панелью и подвал.
5. Сузьте окно браузера. Основной материал и дополнительная панель должны выстроиться друг под другом.

Локальный сервер для этого примера не нужен. Если оформление отсутствует, проверьте имя CSS-файла и расположение файлов. После сохранения изменений обновляйте страницу браузера.

Файл index.html

<!doctype html>
<html lang='ru'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title>Каркас страницы</title>
  <link rel='stylesheet' href='style.css'>
</head>
<body>
  <div class='page'>
    <header class='site-header'>
      <a href='#about'>Учебный сайт</a>
      <a href='#contacts'>Связаться</a>
    </header>
    <nav class='site-nav' aria-label='Основная навигация'>
      <a href='#about'>О проекте</a>
      <a href='#practice'>Практика</a>
      <a href='#contacts'>Контакты</a>
    </nav>
    <main class='layout'>
      <article class='content'>
        <h1>Каркас страницы</h1>
        <section id='about'>
          <h2>О проекте</h2>
          <p>Страница использует семантический HTML и адаптивную сетку.</p>
        </section>
        <section id='practice'>
          <h2>Практика</h2>
          <p>Измените ширину окна: боковая панель переместится под материал.</p>
        </section>
      </article>
      <aside class='sidebar'>
        <h2>Материалы</h2>
        <p>Дополнительная информация по теме страницы.</p>
      </aside>
    </main>
    <footer id='contacts' class='site-footer'>
      <p>Контакты учебного проекта</p>
    </footer>
  </div>
</body>
</html>

Файл style.css

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  color: #202830;
  background: #eef2f5;
  overflow-wrap: anywhere;
}

a {
  color: #174b8a;
}

.page {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  min-height: 100vh;
  padding: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    'header'
    'menu'
    'main'
    'footer';
  gap: 1rem;
}

.site-header {
  grid-area: header;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-nav {
  grid-area: menu;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.layout {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.site-footer {
  grid-area: footer;
}

.site-header,
.site-nav,
.content,
.sidebar,
.site-footer {
  padding: 1rem;
  background: #fff;
  border: 1px solid #ccd2d8;
}

h1 {
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
}

pre {
  max-width: 100%;
  overflow-x: auto;
}

img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 48rem) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: 2rem;
  }
}

Как работают правила примера

HTML связывает оформление с классами через атрибут class. Ссылка <link> подключает таблицу стилей, а rel='stylesheet' обозначает ее назначение. Атрибуты id задают цели навигационных ссылок, aria-label называет область навигации для вспомогательных технологий.

Правило box-sizing задает общую модель размеров. У body значение margin: 0 убирает стандартные внешние поля. font-family выбирает Arial с запасным шрифтом без засечек, а line-height: 1.5 задает межстрочное расстояние относительно размера текста.

color задает цвет текста, background окрашивает фон. Отдельное правило a меняет цвет ссылок, сохраняя стандартное подчеркивание. Свойство overflow-wrap: anywhere разрешает перенос длинных неразрывных строк.

У контейнера .page ширина 100% занимает доступное пространство. Ограничение max-width: 72rem останавливает рост на широком экране. Автоматические поля margin-inline центрируют контейнер по горизонтали.

min-height: 100vh задает минимум высоты в размер области просмотра. Страница может вырасти при увеличении содержимого. В мобильных браузерах видимая высота также зависит от панелей интерфейса.

padding: 1rem оставляет внутренние поля контейнера. Правило display: grid включает сетку, а grid-template-columns создает одну колонку. Ее нулевой минимум разрешает треку сжиматься.

grid-template-rows: auto auto 1fr auto создает четыре строки. Шапка, меню и подвал получают высоту по содержимому. Основная строка занимает оставшееся место, поэтому подвал короткой страницы оказывается внизу.

grid-template-areas называет строки header, menu, main и footer. Соответствующие правила grid-area размещают элементы в этих областях. Значение gap: 1rem задает промежутки между ними.

Вложенная сетка .layout управляет материалом и дополнительной панелью. Шапка и навигация используют Flexbox; перенос включает flex-wrap: wrap. Значение align-items: center центрирует элементы поперек ряда, justify-content: space-between разводит их по краям, а gap сохраняет промежуток.

Групповое правило задает областям внутренние отступы, белый фон и рамку. Запись border объединяет толщину 1px, сплошной тип линии и цвет. Функция clamp() ограничивает размер главного заголовка снизу и сверху.

Правила для pre ограничивают ширину листинга и включают локальную горизонтальную прокрутку. Правила для img ограничивают ширину изображения, сохраняя пропорции через height: auto. Они пригодятся после добавления материалов.

При ширине от 48rem медиазапрос добавляет боковую колонку 16rem. Основная колонка получает остаток через 1fr, промежуток увеличивается до 2rem. Порог выбран для этого учебного содержимого; проверяйте его заново после изменения текста.

Flexbox для рядов внутри блоков

Flexbox раскладывает элементы вдоль одной оси. Он удобен для меню, ряда кнопок, карточек одинаковой высоты и шапки с логотипом и действием.

По умолчанию главная ось идет вдоль строки. Свойство flex-direction: column переключает раскладку на колонку. Вместе с направлением меняется действие выравнивания: justify-content продолжает работать вдоль главной оси.

В примере шапка содержит две ссылки. При достаточной ширине space-between оставляет свободное место между ними. Когда места мало, перенос разрешает ссылкам занять разные строки. Высота шапки при этом увеличивается автоматически.

Перенос не делит одно длинное слово внутри дочернего элемента. Для таких случаев в примере работает overflow-wrap. Сложному flex-элементу иногда дополнительно требуется min-width: 0, чтобы он мог сжаться.

Карточки можно распределить так:

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.cards > * {
  min-width: 0;
  flex: 1 1 15rem;
}

Свойство flex объединяет рост, сжатие и базовый размер. Запись 1 1 15rem задает основу 15rem и разрешает изменение ширины. При переносе каждый ряд распределяет свободное место независимо от соседних рядов.

Поэтому карточки последней строки могут оказаться шире остальных.

Выбирайте Grid, если колонки разных рядов должны совпадать. Flexbox удобнее, когда достаточно последовательности элементов с переносом. Для карточки с вертикальным содержимым подходит Flexbox, даже если сами карточки размещены сеткой Grid.

Адаптивность

Адаптивная верстка начинает работу с узкого экрана. В mobile-first подходе базовые правила описывают одну колонку, а медиазапросы добавляют свободное место для широкого экрана. Такой порядок уменьшает количество переопределений.

Выбирайте порог по содержимому

В рабочем примере базовая сетка уже подходит телефону. Правило @media (min-width: 48rem) только добавляет вторую колонку. HTML сохраняет прежние элементы и порядок чтения при любой ширине.

Сужайте окно постепенно, наблюдая за материалом и меню. Если боковая панель оставляет статье слишком мало места, переключайте раскладку раньше. Значение 48rem не обозначает обязательную границу между конкретными устройствами.

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

Мобильная версия важна и для поисковой индексации. Принцип mobile-first indexing означает использование мобильного представления страницы при индексировании. Сохраняйте на телефоне основной текст, заголовки, изображения и навигационные ссылки. Перестройка сетки не должна превращаться в удаление существенного содержимого.

Разделяйте размер трека и перенос содержимого

Запись minmax(0, 1fr) разрешает колонке сжиматься ниже минимальной ширины содержимого. Однако длинное слово или листинг могут выйти за границы трека. Сама функция не переносит текст и не уменьшает изображение.

В примере эти задачи решают отдельные правила. overflow-wrap: anywhere переносит длинные строки текста, а overflow-x: auto оставляет коду локальную прокрутку. Изображения ограничивает max-width: 100%.

Не скрывайте переполнение всей страницы через overflow-x: hidden ради красивого скриншота. Обрезанные ссылки и кнопки останутся недоступными. Найдите элемент, который расширяет документ, и исправьте его размеры.

Используйте гибкие размеры и повторяемые колонки

Функция clamp() принимает минимум, предпочтительный размер и максимум. В примере заголовок меняется между 1,75rem и 3rem. Среднее выражение соединяет относительный размер шрифта с шириной окна.

Единица rem зависит от размера шрифта корневого элемента. Сохраняйте пользовательские настройки и проверяйте страницу с увеличенным текстом. Даже ограниченный через clamp() заголовок может потребовать несколько строк.

Для карточек подходит сетка без отдельного медиазапроса:

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}

Запись min(100%, 15rem) ограничивает минимум доступной шириной контейнера. Без нее жесткий минимум 15rem способен вызвать переполнение более узкой области. Функция repeat() повторяет столько колонок, сколько помещается.

auto-fit схлопывает пустые повторяемые треки. Если место рассчитано на четыре колонки, а карточек две, пустые колонки исчезнут. Значение 1fr затем распределит свободную ширину между занятыми колонками.

auto-fill сохраняет пустые треки, поэтому две карточки не займут всю строку.

Меняйте компонент по ширине контейнера

Контейнерные запросы полезны для компонентов, которые встречаются в разных областях. Одна карточка может находиться в широкой статье и узкой боковой панели. Ширина окна в этих случаях одинакова, доступное место различается.

.card-slot {
  container-type: inline-size;
}

.card {
  display: grid;
  gap: 1rem;
}

@container (min-width: 30rem) {
  .card {
    grid-template-columns: 1fr 2fr;
  }
}

Для этого дополнения поместите .card внутрь .card-slot. Свойство container-type делает обертку контейнером для запроса ширины. Когда контейнер достигает 30rem, карточка получает две колонки. Базовая одноколоночная версия остается запасным оформлением.

Как верстка делается на практике

Начните с макета в Figma. Выпишите повторяющиеся решения: максимальную ширину контейнера, интервалы, размеры текста, цвета и порядок блоков. Эти значения станут переменными CSS и правилами сетки.

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

Экспортируйте только реальные изображения и иконки. Цвет, тень, рамку и расстояние задавайте средствами CSS. Текст оставляйте текстом: браузер сможет масштабировать его, а поисковая система прочитает содержимое.

Проверьте сетку и разметку

Откройте инструменты разработчика через контекстное меню элемента страницы. Выберите контейнер .page в дереве HTML и включите подсветку Grid рядом с его обозначением сетки. Линии покажут четыре области и промежутки между ними. Аналогично выделите .layout, чтобы увидеть вложенные колонки.

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

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

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

Предусмотрите различия браузеров

Для базовой раскладки используйте стандартный синтаксис Grid и Flexbox без ручного набора префиксов. Целевые браузеры определяют по требованиям проекта. Таблицы caniuse помогают оценивать конкретные возможности: Grid, Flexbox, gap во Flexbox, контейнерные запросы и subgrid.

Поддержка одной возможности не гарантирует поддержку всех остальных. Например, subgrid позволяет вложенной сетке использовать треки родительской, но базовому примеру он не требуется. Дополнительные эффекты можно подключать через проверку @supports.

.optional-row {
  display: block;
}

@supports (display: grid) {
  .optional-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

Браузер применяет внутренние правила, если понимает проверяемое объявление. Такая проверка не обнаруживает все ошибки реализации и не заменяет просмотр страницы.

Проверьте доступность и реальный телефон

Нажимайте Tab, проходя по ссылкам страницы: положение фокуса должно оставаться заметным. Содержательным изображениям задавайте описательный alt, декоративным – пустой alt. Проверяйте контраст текста и фона, включая ссылки и подписи мелким шрифтом.

Откройте страницу на реальном телефоне после размещения файлов на доступном тестовом сайте. Проверьте касания, увеличение текста и обе ориентации экрана. Эмулятор полезен для размеров, но не заменяет взаимодействие с устройством.

Табличная верстка: почему от нее ушли и где она осталась

Элемент <table> описывает отношения между строками и столбцами данных. Он подходит для расписания, прайс-листа, отчета и другой информации, где ячейка имеет смысл относительно заголовка строки или столбца.

Таблицы неудобны как каркас сайта: структура документа смешивается с раскладкой, а изменение дизайна затрагивает много вложенных элементов. CSS Grid и Flexbox отделяют смысл HTML от способа размещения блоков.

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

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

Частые ошибки новичка

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

• Фиксированная ширина страницы. Значение width: 900px не оставляет возможности сжатия. Используйте width: 100% вместе с ограничением max-width.
• float для всей раскладки. Float создает обтекание, которое усложняет выравнивание колонок и управление их высотой. Оставьте его для текста вокруг изображения, а каркас собирайте Grid.
• <div> вместо заголовка. Крупный жирный текст не становится заголовком для скринридера. Выбирайте <h2> или <h3> по уровню раздела.
• Пропущенный alt. Пользователь скринридера может услышать имя файла вместо смысла изображения. Опишите содержание картинки или задайте пустой атрибут для декора.
• Все размеры заданы в px. Пиксели подходят для тонкой рамки. Для текста и связанных с ним отступов используйте rem, для гибких колонок – проценты и fr.
• Фиксированная высота текстового блока. Перевод или увеличение шрифта вытолкнут содержимое за границы. Оставляйте автоматическую высоту либо задавайте только минимум.
• Перестановка важных блоков только средствами CSS. Визуальный порядок может разойтись с чтением и переходами клавиатурой. Сначала выстройте логичный порядок HTML.

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

Совет от нашей редакции: сначала соберите семантический HTML без декоративных деталей, затем добавьте одну колонку Grid, Flexbox внутри блоков и только после этого правила для широкого экрана.