Урок 35. Старый vs Новый: Desktop-first подход

Сравнение 1: жёсткая ширина → гибкая база

❌ Старый подход: фиксированный пиксельный макет

Жёсткие размеры и поздние «заплатки» создают горизонтальный скролл, слишком длинные строки или нечитаемые карточки. На узком экране блок 1180px просто не помещается.

.admin-layout {
  width: 1180px;            /* жёсткая ширина */
  display: grid;
  grid-template-columns: 220px 1fr 260px;
}

@media (max-width: 768px) {
  .admin-layout {
    width: 100%;            /* заплатка, но колонки остались */
  }
}

✅ Современный подход: гибкая основа + осмысленные breakpoint

Сначала задаём гибкую основу (minmax, fr), затем добавляем breakpoint только там, где он действительно улучшает содержимое.

.admin-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr) 18rem;
  gap: 1.5rem;
}

@media (max-width: 64rem) {
  .admin-layout { grid-template-columns: 14rem minmax(0, 1fr); }
}

@media (max-width: 47.99rem) {
  .admin-layout { display: block; }
}

Сравнение 2: desktop-first vs mobile-first

Это два зеркальных способа писать один и тот же адаптив. Разница — в направлении и в том, что считается «базой».