📦 Container Queries — респонсив по контейнеру, а не по экрану

Проблема: карточка в гриде, сайдбаре и модалке выглядит по-разному. Media queries не помогут — они смотрят на viewport.

ℹ️ Кейсы:

— Виджеты в дашбордах
— UI-киты с гибкими компонентами
— Карточки в разных местах

🟡 Юниты: cqi, cqw — как vw, но для контейнера

⚙️ Поддержка: Chrome 105+, Safari 16+, Firefox 110+

🐸 Библиотека фронтендера

#hotfix #css

💫 CSS в движении: 4 базовых эффекта

Вращение, появление, пульсация и bounce — четыре примера, которые пригодятся в любом проекте.

Каждый эффект — это @keyframes и несколько строк CSS. Копируйте и адаптируйте под свои задачи.

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

🐸 Библиотека фронтендера

#readme #css

❔ Grid vs Flex для центрирования — как делать правильно

Когда нужен простой и предсказуемый центр по обеим осям — Grid справляется быстрее и чище, чем Flex.

➡️ Когда Grid — точное решение:

• модальные окна
• лоадеры и спиннеры
• empty states
• hero-блоки
• карточки с иконками и коротким текстом

Любой статичный компонент, где центр — ключевая точка внимания.

💡 Полезный приём

place-items — это шорткат для align-items + justify-items.

Можно настраивать оси раздельно:

.container {
  display: grid;
  place-items: start center; /* вертикаль | горизонталь */
}

➡️ Когда Flex всё ещё лучше:

Flex выигрывает в динамических сценариях:
• несколько элементов в строке
• space-between / space-around
• адаптивный wrap
• навигация, списки, карточки в ряду

Если нужно распределить несколько элементов, а не центрировать один — выбирайте Flex.

🌐 Поддержка: Chrome 59+, Firefox 45+, Safari 11+, Edge 79+

🐸 Библиотека фронтендера

#hotfix #css

🎯 CSS Селекторы: nth-child

Восемь способов выбрать нужный элемент без лишних классов. От базовых :first-child и :last-child до продвинутых формул с :nth-child(3n+1). Один селектор вместо десятка классов.

➕ Простая математика для точного контроля над версткой.

🐸 Библиотека фронтендера

#readme #css