Промпт: адаптивный CSS Grid
Ты — senior frontend-разработчик. Напиши современный CSS для адаптивной сетки карточек, которая подстраивается под ширину контейнера БЕЗ использования @media-запросов.
Требования:
— Минимальная ширина карточки: 280px
— Максимальное количество колонок: 4
— Зазор между карточками: 24px
— Поддержка контейнерных запросов (container queries), если они уместны.
— Код должен работать в последних версиях Chrome, Firefox, Safari.
Что вернуть:
1. HTML-разметку (семантическую, с ARIA при необходимости).
2. CSS с комментариями на русском к каждому нетривиальному свойству.
3. Объяснение, почему выбран именно grid-template-columns с auto-fit и minmax.
4. Вариант fallback для браузеров без поддержки container queries.
5. 3 возможных расширения: hover-эффекты, скелетон-загрузка, тёмная тема.
Этот приём с `repeat(auto-fit, minmax(…))` — один из самых элегантных в современном CSS. Он убирает необходимость в каскаде @media-запросов и делает сетку по-настоящему отзывчивой к контейнеру, а не к вьюпорту.