Урок 35. Решения: Desktop-first подход

Возможное решение

Ниже не единственный правильный вариант, но он показывает рабочую идею урока без лишних зависимостей: одна разметка, раскладку меняет только CSS.

<main class="admin-layout">
  <nav>Меню</nav>
  <section>Рабочая область</section>
  <aside>Сводка</aside>
</main>

.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);
  }
  .admin-layout aside {
    grid-column: 1 / -1;
  }
}

@media (max-width: 47.99rem) {
  .admin-layout {
    display: block;
  }
  .admin-layout > * + * {
    margin-top: 1rem;
  }
}

Разбор логики

• База без @media описывает десктоп: три колонки через grid-template-columns. Боковые задают ширину, центр (minmax(0, 1fr)) тянется и сжимается.
• Первый max-width: 64rem убирает третью колонку и кладёт aside на всю ширину (grid-column: 1 / -1) — это первый «откус» при сужении.
• Второй max-width: 47.99rem отключает grid (display: block) и складывает блоки в стопку, добавляя вертикальные отступы между ними.
• Breakpoints идут от большего к меньшему — каскад читается сверху вниз.