❔ 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