Вёрстка по Grid. Часть 1: сетка

Чтение — около 7 минут· без учёта практики

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

Что такое Grid

Grid (англ. «решётка, сетка») — модель раскладки CSS, которая делит элемент на колонки и строки, а дочерние элементы размещает в получившихся ячейках. Её описывает спецификация CSS Grid Layout Module, и её поддерживают все современные браузеры.

Главное отличие от Flexbox: Flexbox раскладывает элементы в одном направлении, и каждая строка флекс-контейнера живёт сама по себе — элементы разных строк не выстраиваются в колонки. Grid работает в двух направлениях сразу: колонки общие для всех строк, поэтому элементы стоят ровными рядами. Подробнее, как выбирать между ними, — во второй части урока.

Грид-контейнер и грид-элементы

Сетку создают так же, как флекс-контейнер: элементу задают display со значением grid. Элемент становится грид-контейнером, а его дочерние элементы в обычном потоке — грид-элементами. Как и во Flexbox, это только дочерние элементы, а не все потомки. Значение inline-grid создаёт строчный грид-контейнер, который снаружи ведёт себя как строчный элемент.

Прямой текст внутри контейнера получает анонимный грид-элемент; пробелы между тегами не создают отдельных ячеек. Абсолютно позиционированные потомки не участвуют в обычном размещении сетки. В примерах ниже каждый элемент обёрнут в отдельный тег, чтобы им можно было управлять.

Само по себе display: grid почти ничего не меняет на экране: у сетки одна колонка, и элементы стоят друг под другом. Колонки нужно задать отдельно. Промежутки между ячейками задаёт уже знакомое по Flexbox свойство gap: одно значение — одинаковые промежутки между строками и колонками, два — сначала между строками, затем между колонками.

Колонки и строки

Колонки сетки задаёт свойство grid-template-columns. Его значение — список размеров через пробел: сколько размеров, столько и колонок. Подходят любые единицы длины и проценты от ширины контейнера. При обычном горизонтальном письме слева направо элементы заполняют ячейки в том же направлении, а когда колонки в строке закончились — со следующей строки.

CSS

.gallery {
  display: grid;
  grid-template-columns: 8rem 8rem 8rem; /* три колонки по 8rem */
  gap: 0.5rem;
}

grid-template-columns: попробуйте сами

В первой сетке три колонки по 8rem: шесть игрушек встали в два ряда. Во второй — две колонки по 50% и промежуток 2rem. Обратите внимание: проценты не учитывают промежуток, поэтому сетка шире контейнера и выходит за пунктирную рамку.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Колонки сетки grid-template-columns</title>
    <style>
      body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; margin: 1rem; }
      .grid { display: grid; gap: 0.5rem; border: 2px dashed tan; padding: 0.5rem; margin-bottom: 1rem; }
      .grid > * { background-color: #fffaf3; border: 1px solid saddlebrown; border-radius: 8px; padding: 0.5rem; }
      h3 { font-size: 1rem; margin: 0 0 0.25rem; }
      .three { grid-template-columns: 8rem 8rem 8rem; }
      .two { grid-template-columns: 50% 50%; gap: 2rem; }
    </style>
  </head>
  <body>
    <h3>grid-template-columns: 8rem 8rem 8rem</h3>
    <div class="grid three"><div>мячик</div><div>канат</div><div>косточка</div><div>белка</div><div>тапок</div><div>шарик</div></div>
    <h3>grid-template-columns: 50% 50%; gap: 2rem</h3>
    <div class="grid two"><div>мячик</div><div>канат</div><div>косточка</div><div>белка</div></div>
  </body>
</html>

Второй пример показывает неудобство процентов: промежутки в них не учтены. Задача «разделить место поровну, учитывая промежутки» встречается постоянно, и для неё в Grid есть специальная единица.

Единица fr

Единица fr (от англ. fraction — «доля») означает долю свободного места в контейнере. Браузер при определённой ширине контейнера сначала учитывает промежутки и размеры остальных колонок, а оставшееся место делит между колонками в fr пропорционально числам. 1fr 1fr 1fr — три равные колонки, 1fr 2fr 1fr — средняя вдвое шире крайних, 10rem 1fr — колонка 10rem и колонка на всё остальное место.

Единица fr: попробуйте сами

Сравните равные доли, пропорцию 1:2:1 и сочетание постоянной колонки с гибкой. В последней сетке три доли по 0.25fr оставляют четверть места свободной.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Доли свободного места fr</title>
    <style>
      body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; margin: 1rem; }
      .grid { display: grid; gap: 0.5rem; border: 2px dashed tan; padding: 0.5rem; margin-bottom: 1rem; }
      .grid > * { background-color: #fffaf3; border: 1px solid saddlebrown; border-radius: 8px; padding: 0.5rem; }
      h3 { font-size: 1rem; margin: 0 0 0.25rem; }
      .equal { grid-template-columns: 1fr 1fr 1fr; }
      .wide { grid-template-columns: 1fr 2fr 1fr; }
      .mixed { grid-template-columns: 10rem 1fr; }
      .partial { grid-template-columns: repeat(3, minmax(0, 0.25fr)); }
      .partial > * { min-width: 0; padding: 0; border: 0; }
    </style>
  </head>
  <body>
    <h3>1fr 1fr 1fr</h3>
    <div class="grid equal"><div>мячик</div><div>канат</div><div>косточка</div></div>
    <h3>1fr 2fr 1fr</h3>
    <div class="grid wide"><div>мячик</div><div>канат</div><div>косточка</div></div>
    <h3>10rem 1fr</h3>
    <div class="grid mixed"><div>мячик</div><div>канат</div></div>
    <h3>три колонки по 0.25fr: четверть места остаётся</h3>
    <div class="grid partial"><div>1</div><div>2</div><div>3</div></div>
  </body>
</html>

Эти пропорции выполняются, пока им не мешают минимальные размеры колонок; ниже разберём автоматический минимум. Если сумма коэффициентов fr меньше 1, часть места может остаться свободной: три колонки по 0.25fr запрашивают только три четверти. В последнем примере минимум явно равен нулю, чтобы показать именно это деление.

Строки

Высоту строк так же задаёт свойство grid-template-rows. Обычно его не указывают: по умолчанию высота каждой строки подстраивается под самое высокое содержимое в ней, а все обычные элементы с автоматической высотой растягиваются на эту высоту. Если элементов больше, чем ячеек в заданных строках, браузер сам добавит новые строки — о такой неявной сетке поговорим во второй части урока.

grid-template-rows: попробуйте сами

Заданы две строки: 3rem и 6rem. Восьми игрушкам их не хватает, поэтому браузер добавил третью строку с высотой по содержимому.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Строки сетки grid-template-rows</title>
    <style>
      body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; margin: 1rem; }
      .grid { display: grid; gap: 0.5rem; border: 2px dashed tan; padding: 0.5rem; margin-bottom: 1rem; }
      .grid > * { background-color: #fffaf3; border: 1px solid saddlebrown; border-radius: 8px; padding: 0.5rem; }
      h3 { font-size: 1rem; margin: 0 0 0.25rem; }
      .grid { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 3rem 6rem; }
    </style>
  </head>
  <body>
    <div class="grid"><div>мячик</div><div>канат</div><div>косточка</div><div>белка</div><div>тапок</div><div>шарик</div><div>утка</div><div>кольцо</div></div>
  </body>
</html>

Функция repeat()

Чтобы не перечислять одинаковые размеры, используют функцию repeat(): первым аргументом указывают, сколько раз повторить, вторым — что повторять. repeat(4, 1fr) — то же, что 1fr 1fr 1fr 1fr. Повторять можно и несколько размеров: repeat(2, 1fr 2fr) даёт 1fr 2fr 1fr 2fr.

repeat(): попробуйте сами

Первая сетка — четыре равные колонки. Во второй повторяется пара «узкая и широкая колонка». Замените 4 на 3 в первой сетке — колонок станет три.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Функция repeat()</title>
    <style>
      body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; margin: 1rem; }
      .grid { display: grid; gap: 0.5rem; border: 2px dashed tan; padding: 0.5rem; margin-bottom: 1rem; }
      .grid > * { background-color: #fffaf3; border: 1px solid saddlebrown; border-radius: 8px; padding: 0.5rem; }
      h3 { font-size: 1rem; margin: 0 0 0.25rem; }
      .four { grid-template-columns: repeat(4, 1fr); }
      .pattern { grid-template-columns: repeat(2, 1fr 2fr); }
    </style>
  </head>
  <body>
    <h3>repeat(4, 1fr)</h3>
    <div class="grid four"><div>мячик</div><div>канат</div><div>косточка</div><div>белка</div><div>тапок</div><div>шарик</div><div>утка</div><div>кольцо</div></div>
    <h3>repeat(2, 1fr 2fr)</h3>
    <div class="grid pattern"><div>мячик</div><div>канат</div><div>косточка</div><div>белка</div><div>тапок</div><div>шарик</div><div>утка</div><div>кольцо</div></div>
  </body>
</html>

Функция minmax()

Функция minmax() задаёт размер колонки диапазоном: первый аргумент — минимум, второй — максимум. minmax(10rem, 1fr) означает «не уже 10rem, а если место есть — доля свободного места».

С minmax() связана частая неожиданность. Колонка 1fr на самом деле означает minmax(auto, 1fr): автоматический минимум может зависеть от содержимого элементов, их размеров и того, сколько колонок они занимают. В простом примере с одним элементом в каждой ячейке длинное слово или адрес раздвигают колонку и ломают равные доли. Запись minmax(0, 1fr) снимает этот минимум, и колонки остаются равными; длинное слово при этом нужно разрешить переносить.

minmax(): попробуйте сами

В первой сетке колонки 1fr 1fr, но длинный адрес раздвинул первую колонку, и равные доли пропали. Во второй minmax(0, 1fr) оставил колонки равными, а overflow-wrap: anywhere перенёс адрес.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Функция minmax()</title>
    <style>
      body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; margin: 1rem; }
      .grid { display: grid; gap: 0.5rem; border: 2px dashed tan; padding: 0.5rem; margin-bottom: 1rem; }
      .grid > * { background-color: #fffaf3; border: 1px solid saddlebrown; border-radius: 8px; padding: 0.5rem; }
      h3 { font-size: 1rem; margin: 0 0 0.25rem; }
      .grid { width: 20rem; }
      .fr { grid-template-columns: 1fr 1fr; }
      .zero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
      .zero > * { overflow-wrap: anywhere; }
    </style>
  </head>
  <body>
    <h3>1fr 1fr</h3>
    <div class="grid fr"><div>tony.example/pages/toys.html</div><div>мячик</div></div>
    <h3>minmax(0, 1fr) minmax(0, 1fr)</h3>
    <div class="grid zero"><div>tony.example/pages/toys.html</div><div>мячик</div></div>
  </body>
</html>

Сколько колонок поместится: auto-fill и auto-fit

Самое полезное сочетание: вместо числа повторений в repeat() указать ключевое слово auto-fill или auto-fit, а размер колонки задать через minmax(). Браузер сам посчитает, сколько колонок минимальной ширины помещается в контейнер, и при сужении окна будет уменьшать их число. Так строят галереи, которые подстраиваются под экран без медиазапросов.

CSS

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); /* колонки не уже 15rem */
  gap: 1rem;
}

Различие видно, когда после размещения остаются пустые колонки. В нашем примере каждый элемент занимает одну ячейку, поэтому это происходит, когда элементов меньше, чем помещается колонок. auto-fill сохраняет пустые колонки: свободное место делится между всеми колонками, включая пустые, поэтому ширина заполненных может быть больше указанного минимума. auto-fit схлопывает пустые колонки, и элементы растягиваются на всю ширину контейнера.

auto-fill и auto-fit: попробуйте сами

Три игрушки в широком контейнере. При auto-fill справа остаются пустые колонки, при auto-fit три элемента делят всю ширину. Добавьте в сетки ещё пять элементов div — когда колонки заполнятся, сетки станут одинаковыми.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Автоматическое число колонок auto-fill и auto-fit</title>
    <style>
      body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; margin: 1rem; }
      .grid { display: grid; gap: 0.5rem; border: 2px dashed tan; padding: 0.5rem; margin-bottom: 1rem; }
      .grid > * { background-color: #fffaf3; border: 1px solid saddlebrown; border-radius: 8px; padding: 0.5rem; }
      h3 { font-size: 1rem; margin: 0 0 0.25rem; }
      .fill { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
      .fit { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
      .safe { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
      .safe > * { overflow-wrap: anywhere; }
    </style>
  </head>
  <body>
    <h3>auto-fill</h3>
    <div class="grid fill"><div>мячик</div><div>канат</div><div>косточка</div></div>
    <h3>auto-fit</h3>
    <div class="grid fit"><div>мячик</div><div>канат</div><div>косточка</div></div>
    <h3>auto-fit с минимумом не шире контейнера</h3>
    <div class="grid safe"><div>мячик</div><div>канат</div><div>косточка</div></div>
  </body>
</html>

Минимум колонки и узкий экран

Если контейнер уже минимума колонки, например 15rem на очень узком экране, колонка всё равно останется шириной 15rem и выйдет за край. Для типичных телефонов ширины 15rem (240px при обычном размере шрифта) хватает, а ограничить минимум шириной контейнера позволяет уже изученная функция min(): repeat(auto-fit, minmax(min(100%, 15rem), 1fr)). В третьем примере выше минимум 8rem защищён так же: временно задайте всем трём сеткам .grid { width: 6rem; } и сравните результат. Первые две выйдут за край, а третья ограничит минимум доступной шириной.

Grid в инструментах разработчика

На вкладке Elements инструментов разработчика Google Chrome рядом с грид-контейнером стоит значок grid. Нажмите его, и браузер нарисует на странице линии сетки с номерами и заштрихует промежутки gap. На вкладке Layout перечислены все сетки страницы и настройки подсветки: например, можно показать размеры колонок. Так удобно проверять, сколько колонок получилось при текущей ширине окна.

Меняйте grid-template-columns и gap и смотрите, как раскладываются фотографии альбома Тони. Попробуйте значения repeat(2, 1fr), 1fr 2fr 1fr и repeat(auto-fit, minmax(8rem, 1fr)), а затем сужайте превью ползунком «Ширина превью».

Цвета и отступы элементов превью — только оформление, в код они не входят.

Контейнер .container

grid-template-columns

Размеры колонок через пробел. Используйте fr, minmax(), repeat() и auto-fill. Справочник: grid-template-columns

grid-template-rows

Размеры явных строк. Строки сверх списка получают размер из grid-auto-rows. Справочник: grid-template-rows

grid-auto-rows

Размер строк, которые сетка создаёт автоматически. Справочник: grid-auto-rows

grid-auto-flow

Как размещаются элементы без явной позиции. dense заполняет пропуски. Справочник: grid-auto-flow

gap

Расстояние между строками и колонками. Можно указать два значения: по вертикали и по горизонтали. Справочник: gap

justify-items

Выравнивание элементов внутри ячеек по горизонтали. Справочник: justify-items

align-items

Выравнивание элементов внутри ячеек по вертикали. Справочник: align-items

justify-content

Положение всей сетки по горизонтали, когда колонки уже контейнера. Справочник: justify-content

align-content

Положение всей сетки по вертикали, когда строки ниже контейнера. Справочник: align-content

min-height

Минимальная высота контейнера. Без свободного места выравнивание по поперечной оси незаметно. Справочник: min-height

Элементы

Выберите элемент в превью или в списке «Настраиваем», чтобы изменить его свойства. Общие настройки всех элементов — пункт «все элементы (.item)».

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Размещение по линиям и именованные области — в конструкторе Grid

Проверьте себя

Задание

Теперь мой альбом как настоящий: ровные ряды, а на телефоне — одна большая фотография за другой!

Фотоальбом на Grid

В редакторе — сайт Тони после урока о Flexbox. Измените pages/toys.html и css/style.css:

Доработайте HTML: в разделе «Мой фотоальбом» на странице pages/toys.html добавьте списку <ul> класс gallery.
Сделайте альбом сеткой: правило .gallery с display: grid, grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)), gap: 1rem, list-style: none и padding: 0.
Уберите внешние отступы у фигур альбома (.gallery figure — margin: 0) и растяните фото на ширину ячейки (.gallery img — width: 100%).

Ожидаемый результат: на странице «Мои игрушки» фотографии альбома стоят ровными рядами — на широком экране в три колонки, при сужении окна в две, а на телефоне в одну. Проверьте на вкладке Elements: у списка есть значок grid, а при его включении видны линии сетки.

Выполните задание

css/style.css

CSS

/* Общие стили сайта Тони */

/* Ширина и высота включают внутренние отступы и рамку — у всех элементов и псевдоэлементов */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Шрифт заголовков Nunito (лицензия SIL Open Font License): кириллица и латиница в разных файлах */
@font-face {
  font-family: "Nunito";
  src: url("../assets/nunito-cyrillic-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap; /* пока шрифт загружается, текст виден запасным шрифтом */
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Nunito";
  src: url("../assets/nunito-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}

body {
  background-color: linen;
  color: #2b211b; /* цвет для потомков без собственного значения */
  font-size: 1.0625rem; /* 17px при настройке браузера по умолчанию */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* системный шрифт устройства */
  line-height: 1.6; /* множитель: у каждого элемента интервал от его собственного размера шрифта */
  margin: 0; /* убираем отступ браузера: шапка и подвал во всю ширину окна */
}

/* Поля основного содержимого: текст не прижимается к краям окна */
main {
  padding: 1.5rem 1rem;
  max-width: 68rem; /* на широком экране строки не растягиваются на всё окно */
  margin: 0 auto; /* колонка по центру */
}

/* Изображения и видео не шире колонки, пропорции сохраняются */
img,
video {
  max-width: 100%;
  height: auto;
}

/* Фреймы, аудиоплеер, индикаторы и поля формы не выходят за колонку */
progress,
meter,
iframe,
audio,
input,
select,
textarea,
button {
  max-width: 100%;
}

/* Разрешаем группе полей сужаться вместе с колонкой. */
fieldset {
  min-width: 0;
}

/* Общий цвет заголовков — групповой селектор */
h1,
h2 {
  color: saddlebrown;
  font-family: "Nunito", "Trebuchet MS", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2; /* крупному тексту хватает меньшего интервала */
}

/* Размеры заголовков в rem — от размера шрифта корня, а не родителя */
h1 {
  text-align: center;
  font-size: 2.5rem;
}

h2 {
  font-size: 1.75rem;
}

/* Вводный блок главной страницы */
.intro {
  background-color: hsl(30, 80%, 95%);
  padding: 1.5rem; /* фон вокруг текста; заодно не выпускает margin заголовка за пределы блока */
  border-radius: 16px; /* скругляется и фон, хотя рамки нет */
  /* Лапка в правом нижнем углу; цвет фона выше остаётся запасным, если картинка не загрузится */
  background-image: url("../assets/paw.svg");
  background-repeat: no-repeat;
  background-position: right 1rem bottom 1rem;
  background-size: 4rem;
}

/* Разделы главной — светлые карточки на фоне страницы */
main > section {
  background-color: #fffaf3;
  border: 1px solid hsl(28, 30%, 82%);
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

/* Ширина вводных абзацев ограничена 60ch; количество букв в строке зависит от шрифта и текста */
.intro p {
  max-width: 60ch;
}

/* Важное предупреждение во вводном блоке — темнее основного акцента */
.intro strong {
  color: #6e3510;
}

/* Оглавление главной страницы — переносимый ряд «таблеток» на Flexbox */
.toc {
  background-color: white;
  border: 1px solid tan;
  display: flex;
  flex-wrap: wrap; /* «таблетки», которым не хватает места, переходят на новую строку */
  gap: 0.5rem; /* промежутки между «таблетками» и между строками */
  list-style: none;
  padding: 0.75rem;
}

/* Подчёркивание ссылок чуть ниже букв: не задевает выносные элементы */
a {
  text-underline-offset: 3px;
}

/* Тонкая линия отделяет шапку от страницы */
header {
  border-bottom: 1px solid tan;
}

/* Меню на Flexbox: пункты могут переноситься, промежутки задаёт gap */
nav ul {
  margin: 0;
  padding: 0.5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

/* Ссылка на запись стоит отдельно у правого края: автоматический отступ забирает свободное место */
nav li:last-child {
  margin-left: auto;
}

/* Ссылки меню в шапке — селектор потомков */
nav a {
  color: saddlebrown;
  text-decoration: none;
  display: inline-block; /* у строчной ссылки вертикальный padding не раздвигает строку */
  padding: 0.4rem 0.9rem;
  border-radius: 999px; /* «таблетка»: радиус больше половины высоты */
}

/* Ссылки оглавления главной страницы */
.toc a {
  color: #6b5d52; /* тёплый серый: контраст 6.34:1 на белом фоне оглавления */
  display: block; /* ссылка заполняет «таблетку» целиком */
  padding: 0.25rem 0.75rem;
  border: 1px solid tan;
  border-radius: 999px;
  text-decoration: none;
}

/* Фотографии со скруглёнными углами */
figure img {
  border-radius: 8px;
}

figcaption {
  color: #6b5d52; /* тёплый серый: контраст 5.64:1 на фоне linen */
  font-size: 0.95rem;
}

footer {
  background-color: hsl(30, 50%, 90%);
  text-align: center;
  padding: 1rem;
}

/* Ссылка в подвале берёт цвет текста подвала */
footer a {
  color: inherit;
}

/* Поля формы получают шрифт страницы вместо шрифта браузера */
input,
select,
textarea,
button {
  font: inherit;
}

/* Ссылки темнеют при наведении указателя */
a:hover {
  color: #5c2d0c;
}

/* Ссылки меню подчёркиваются при наведении и фокусе с клавиатуры */
nav a:hover,
nav a:focus-visible {
  text-decoration: underline;
}

/* Заметная рамка фокуса у ссылок, полей и кнопок при работе с клавиатуры */
:focus-visible {
  outline: 3px solid #1f6feb;
  outline-offset: 3px;
}

/* Цитата из книги — шрифтом с засечками и курсивом */
blockquote {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  border-left: 4px solid tan; /* черта слева выделяет цитату */
  padding-left: 1rem;
}

/* Подпись под цитатой — у правого края */
blockquote + figcaption {
  text-align: right;
}

/* Строки формы на Flexbox: подпись — колонка постоянной ширины, поле занимает остаток строки,
   а на узком экране переносится под подпись */
fieldset p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

fieldset p label {
  flex: 0 1 12rem; /* не растёт, но может сжаться в узкой строке */
  min-width: 0;
}

fieldset p input,
fieldset p select,
fieldset p textarea {
  flex: 1 1 12rem; /* растёт и сжимается от исходной ширины 12rem */
  min-width: 0; /* поле может стать уже своего автоматического минимума */
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Сайт карликового пинчера Тони: игрушки, режим дня и запись на прогулку.">
    <title>Сайт Тони</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>
      <!-- Меню сайта -->
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="pages/toys.html">Мои игрушки</a></li>
          <li><a href="pages/signup.html">Запись на прогулку</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <div class="intro">
        <h1 id="top">Привет! Меня зовут Тони</h1>
        <p>Я карликовый пинчер. Мне три года, я вешу 8&nbsp;кг и люблю гулять в любую погоду. Хозяин говорит: <q>Тони — лучший сторож в доме</q>.</p>
        <p>Мой день рождения — <time datetime="2023-09-22">22 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
        <p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
      </div>
      <ul class="toc">
        <li><a href="#toy">Моя любимая игрушка</a></li>
        <li><a href="#commands">Команды, которые я знаю</a></li>
        <li><a href="#schedule">Мой режим дня</a></li>
        <li><a href="#walks">Где я гуляю</a></li>
        <li><a href="#song">Песня для прогулок</a></li>
      </ul>
      <section>
        <h2 id="toy">Моя любимая игрушка</h2>
        <p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — <em>почти</em> всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
        <figure>
          <img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат &quot;Удав&quot;">
          <figcaption>Я и мой канат «Удав»</figcaption>
        </figure>
        <p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
        <p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
        <hr>
        <p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
      </section>
      <section>
        <h2>Мой стишок</h2>
        <p>
          Я маленький, но смелый,<br>
          Гуляю целый день,<br>
          А вечером на кресле<br>
          Сплю — и мне не лень.
        </p>
      </section>
      <section>
        <h2 id="commands">Команды, которые я знаю</h2>
        <p>Хозяин научил меня командам на немецком:</p>
        <dl>
          <dt lang="de">Sitz!</dt>
          <dd>сидеть</dd>
          <dt lang="de">Platz!</dt>
          <dd>лежать</dd>
          <dt lang="de">Fuß!</dt>
          <dd>рядом</dd>
        </dl>
        <details>
          <summary>Почему команды на немецком?</summary>
          <p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
        </details>
      </section>
      <section>
        <h2 id="schedule">Мой режим дня</h2>
        <table>
          <caption>Режим дня Тони</caption>
          <thead>
            <tr>
              <th scope="col">Время</th>
              <th scope="col">Будни</th>
              <th scope="col">Выходные</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">07:00</th>
              <td>Прогулка, 20 минут</td>
              <td>Сплю</td>
            </tr>
            <tr>
              <th scope="row">08:00</th>
              <td colspan="2">Завтрак</td>
            </tr>
            <tr>
              <th scope="row">13:00</th>
              <td>Жду хозяина и сплю</td>
              <td>Прогулка в парке, 1 час</td>
            </tr>
            <tr>
              <th scope="row">19:00</th>
              <td colspan="2">Ужин</td>
            </tr>
            <tr>
              <th scope="row">21:00</th>
              <td colspan="2">Вечерняя прогулка</td>
            </tr>
          </tbody>
        </table>
      </section>
      <section>
        <h2 id="progress">Мои успехи</h2>
        <p>Учу команду «Апорт»: пройдено 3 занятия из 5. <progress value="3" max="5">3 из 5</progress></p>
        <p>Прогулка сегодня: 40 минут. <meter value="40" min="0" max="90" low="30" high="60" optimum="75">40 из 90 минут</meter></p>
      </section>
      <section>
        <h2 id="walks">Где я гуляю</h2>
        <p>Я люблю гулять в сквере у дома.</p>
        <p>
          <a href="pages/walks.html" target="walk">Маршрут</a> |
          <a href="assets/tony.png" target="walk">Фото с прогулки</a>
        </p>
        <iframe src="pages/walks.html" name="walk" title="Маршрут и фото прогулки Тони" width="320" height="420"></iframe>
        <h3>Видео с прогулки</h3>
        <p>Субтитры помогут, если вы смотрите видео без звука.</p>
        <video width="180" height="320" poster="assets/walk.jpg" controls>
          <source src="assets/walk.mp4" type="video/mp4">
          <track src="assets/ru.vtt" kind="subtitles" srclang="ru" label="Русский" default>
          <p><a href="assets/walk.mp4">Скачать видео</a></p>
        </video>
        <h3>Как я лаю</h3>
        <p>Так я разговариваю с хозяином — у нас целый диалог!</p>
        <audio controls>
          <source src="assets/bark.mp3" type="audio/mpeg">
          <p><a href="assets/bark.mp3">Скачать запись</a></p>
        </audio>
      </section>
      <section>
        <h2 id="song">Песня для прогулок</h2>
        <p>Хозяин включает эту песню, когда мы выходим гулять.</p>
        <iframe width="480" height="270" src="https://www.youtube.com/embed/ojULkWEUsPs?start=17" title="Baha Men — Who Let the Dogs Out" loading="lazy" allow="fullscreen"></iframe>
        <p><a href="https://www.youtube.com/watch?v=ojULkWEUsPs">Baha Men — Who Let the Dogs Out на YouTube</a></p>
      </section>
      <section>
        <h2>Моя любимая книга</h2>
        <p>Хозяин читал мне вслух рассказ <cite>«Каштанка»</cite> Антона Чехова. Он начинается так:</p>
        <figure>
          <blockquote>
            <p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
          </blockquote>
          <figcaption>— Антон Чехов, <cite>«Каштанка»</cite></figcaption>
        </figure>
      </section>
      <p><a href="#top">Наверх</a></p>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/signup.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Запишитесь на совместную прогулку с карликовым пинчером Тони.">
    <title>Запись на прогулку с Тони</title>
    <link rel="stylesheet" href="../css/style.css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
          <li><a href="signup.html">Запись на прогулку</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Запись на прогулку</h1>
      <p>Гуляйте вместе с Тони! Оставьте заявку, и хозяин Тони напишет вам, чтобы договориться о встрече.</p>
      <p><a href="../index.html#walks">Где мы гуляем</a></p>
      <form>
        <fieldset>
          <legend>О вас</legend>
          <p>
            <label for="owner">Ваше имя</label>
            <input type="text" id="owner" name="owner" autocomplete="name" required>
          </p>
          <p>
            <label for="email">Электронная почта</label>
            <input type="email" id="email" name="email" autocomplete="email" placeholder="anna@example.com" required>
          </p>
        </fieldset>
        <fieldset>
          <legend>Ваша собака</legend>
          <p>
            <label for="breed">Порода</label>
            <input type="text" id="breed" name="breed" list="breeds">
            <datalist id="breeds">
              <option value="Карликовый пинчер"></option>
              <option value="Такса"></option>
              <option value="Йоркширский терьер"></option>
              <option value="Беспородная"></option>
            </datalist>
          </p>
          <p>
            <label for="dogs">Сколько собак придёт</label>
            <input type="number" id="dogs" name="dogs" min="1" max="3" value="1">
          </p>
        </fieldset>
        <fieldset>
          <legend>Когда гулять</legend>
          <p>
            <label for="date">Дата</label>
            <input type="date" id="date" name="date" required>
          </p>
          <label><input type="radio" name="time" value="morning" checked> Утром</label>
          <label><input type="radio" name="time" value="evening"> Вечером</label>
        </fieldset>
        <fieldset>
          <legend>Прогулка</legend>
          <p>
            <label for="leader">Ведёт прогулку</label>
            <input type="text" id="leader" name="leader" value="Тони" readonly>
          </p>
          <p>
            <label for="route">Маршрут</label>
            <select id="route" name="route">
              <optgroup label="В городе">
                <option value="square">Сквер у дома</option>
                <option value="pond" selected>Пруд с утками</option>
              </optgroup>
              <optgroup label="За городом">
                <option value="forest">Лес</option>
                <option value="river" disabled>Берег реки — закрыт до весны</option>
              </optgroup>
            </select>
          </p>
          <p>
            <label for="wishes">Пожелания</label>
            <textarea id="wishes" name="wishes" rows="4" cols="40" maxlength="300" placeholder="Например: моя собака боится велосипедов"></textarea>
          </p>
        </fieldset>
        <fieldset>
          <legend>Что взять с собой</legend>
          <label><input type="checkbox" name="take" value="ball"> Мячик</label>
          <label><input type="checkbox" name="take" value="rope"> Канат</label>
        </fieldset>
        <p>
          <button type="submit">Записаться на прогулку</button>
          <button type="reset">Очистить форму</button>
        </p>
      </form>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/toys.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Любимые игрушки Тони и правила игры в канат.">
    <title>Игрушки Тони</title>
    <link rel="stylesheet" href="../css/style.css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
          <li><a href="signup.html">Запись на прогулку</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Мои игрушки</h1>
      <ul>
        <li>Канат с мячиком «Удав» — моя любимая игрушка</li>
        <li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
        <li>Пищащий ёжик — его я прячу <del>под диваном</del> <ins>в своей лежанке</ins></li>
      </ul>
      <img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
      <h2>Как играть со мной в канат</h2>
      <ol>
        <li>Покажите мне канат.</li>
        <li>Бросьте его подальше.</li>
        <li>Подождите, пока я принесу его обратно.</li>
        <li>Похвалите меня — и всё сначала!</li>
      </ol>
      <section>
        <h2 id="album">Мой фотоальбом</h2>
        <ul>
          <li>
            <figure>
              <img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
              <figcaption>Я в детстве</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
              <figcaption>С плюшевой белкой</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
              <figcaption>В худи для холодной погоды</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
              <figcaption>Шлейка надета — идём гулять!</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
              <figcaption>Смеюсь над шуткой хозяина</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
              <figcaption>После прогулки</figcaption>
            </figure>
          </li>
        </ul>
      </section>
      <p><a href="../index.html#commands">Какие команды я знаю</a></p>
      <p><a href="../index.html">Вернуться на главную</a></p>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/walks.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Маршрут прогулки Тони: сквер, пруд и поляна для игры с канатом.">
    <title>Где гуляет Тони</title>
    <link rel="stylesheet" href="../css/style.css">
  </head>
  <body>
    <h1>Мой маршрут</h1>
    <ol>
      <li>Сквер у дома.</li>
      <li>Пруд с утками.</li>
      <li>Поляна для игры с канатом.</li>
    </ol>
  </body>
</html>

Продолжите в VS Code

Внесите те же изменения в pages/toys.html и css/style.css своего сайта my-site, сохраните файлы и откройте страницу игрушек в браузере. Проверка: при сужении окна число колонок альбома уменьшается. Если результат отличается, нажмите в редакторе «Показать решение» и сравните его со своим кодом.

Вёрстка по Grid. Часть 1: сетка

Что такое Grid

Грид-контейнер и грид-элементы

Колонки и строки

grid-template-columns: попробуйте сами

Единица fr

Единица fr: попробуйте сами

Строки

grid-template-rows: попробуйте сами

Функция repeat()

repeat(): попробуйте сами

Функция minmax()

minmax(): попробуйте сами

Сколько колонок поместится: auto-fill и auto-fit

auto-fill и auto-fit: попробуйте сами

Grid в инструментах разработчика

Потренируйтесь

Проверьте себя

Задание

Выполните задание

Продолжите в VS Code