Урок 09. Задания
⚡ Кратко
Три задания на сетки и четыре вопроса.
Задания
Задание 1. Каталог товаров
Сетка карточек: одна колонка на мобильном, две от 640px, три от 1024px, четыре от 1280px. Промежуток 24px. Заголовок «Каталог» должен занимать всю ширину сетки.
Задание 2. Блок статистики
Четыре метрики в ряд на широком экране и по две на узком. Пятый блок — график — занимает всю ширину. Все карточки одной высоты.
Задание 3. Сетка без брейкпоинтов
Соберите список тегов, где число колонок подбирается автоматически: минимальная ширина элемента 180px, свободное место делится поровну.
Проверка понимания
Выберите один вариант ответа — правильный подсветится после клика.
Вопрос 1
Что делает grid-cols-3?
Вопрос 2
Как растянуть элемент на всю ширину сетки?
Вопрос 3
Чем заменяется пробел в произвольном значении grid-cols-[200px_1fr]?
Вопрос 4
Когда лучше выбрать grid, а не flex?