Испытание: Программа тура

Вам предстоит самостоятельно сверстать сетку страницы:

Разметка и декоративные стили готовы, осталось написать сеточные стили. Советуем сразу обнулить внешние отступы у <body>, а для создания колонок использовать гриды.

В шапке должно быть две колонки: правая имеет фиксированный размер, а левая занимает всё оставшееся пространство. Не забудьте про внутренние отступы.

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

Подвал страницы довольно простой, но у него отличается внутренний отступ сверху.

Решение

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

body {
  margin: 0;
}

.page-header {
  display: grid;
  grid-template-columns: 1fr 160px;
  padding-top: 30px;
  padding-right: 20px;
  padding-bottom: 70px;
  padding-left: 20px;
}

.days-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 30px;
  column-gap: 20px;
  margin: 0;
  padding-top: 25px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 20px;
}

.page-footer {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

Притормози, дружище

Проходить вызовы части «Сетки» тренажёра «Базовые механики построения сеток» можно после регистрации и оформления подписки.

Зарегистрироваться