Задания
Задание 1. Карта из двух областей
Сделайте контейнер с двумя блоками sidebar и content в одну строку
через grid-template-areas и grid-area. Колонки: 200px 1fr.
Задание 2. Классический макет (целевой результат)
Соберите макет: header сверху на всю ширину, под ним sidebar слева и
main справа, footer снизу на всю ширину. Должно получиться так:
Задание 3. Перестановка без правки HTML
Возьмите макет из задания 2 и перенесите sidebar вправо, изменив
только grid-template-areas и порядок колонок. HTML и
grid-area у элементов трогать нельзя.
Задание 4. Пустая ячейка
Добавьте в карту точку ., чтобы одна ячейка осталась пустой (например, правый
верхний угол), и убедитесь, что туда ничего не попадает.
Задание 5. Диагностика
Включите Grid overlay (F12) и назовите по схеме браузера: строки, колонки, gap и в какую именованную область попал каждый элемент.
Задание 6. Обоснование
Объясните в одном-двух предложениях, почему для этого каркаса выбран Grid, а не Flexbox.