Адаптивная сетка проектов
CSS без боли: раскладки с Grid
Любому хорошему портфолио нужен аккуратный способ показать работы. Классический паттерн — сетка карточек проектов: ровные строки и столбцы, которые автоматически перестраиваются при изменении размера экрана.
Раньше приходилось воевать с float и clearfix. А теперь? Вы просто описываете, что хотите — «три равные колонки с отступом» — а grid-утилиты Tailwind делают всё остальное. Отдельный CSS-файл не нужен.
В этом уроке вы соберёте адаптивную сетку проектов: заголовок, а под ним контейнер grid с тремя карточками. К концу урока вы будете понимать grid, grid-cols-3 и gap — три инструмента, к которым будете возвращаться снова и снова.
Инструкции
Добавьте заголовок раздела h2 над сеткой, чтобы посетители понимали, что перед ними.
Подсказка: Используйте: `<h2 class="text-3xl font-bold mb-8 text-center">Избранные проекты</h2>`
Куда это писать?
<!-- Соберите свою сетку проектов здесь -->Пишите в строке 12 — под тем комментарием, после уже добавленного кода.
Создайте div-контейнер сетки с классом grid и отступом между карточками.
Сделайте так, чтобы на средних экранах и шире сетка показывала три равные колонки.
Добавьте внутрь сетки хотя бы одну карточку проекта — элемент article с заголовком и описанием.
Ваш код
Опишите, что хотите создать на этом шаге, и я напишу код — затем нажмите «Применить», чтобы вставить его в редактор. Текущий шаг: Добавьте заголовок раздела h2 над сеткой, чтобы посетители понимали, что перед ними.