Урок 11. Решения

📁 Раздел: Раскладка ⏱️ Время изучения: ~50 мин 🎯 Сложность: Средняя

⚡ Кратко

Три решения с живым результатом: секция, диапазонное меню и компонент на container queries.

Решение задания 1

Возможности

Всё, что нужно команде для работы над проектами.

Отчёты

Задачи

Календарь

Файлы

Права доступа

Интеграции

<section class="rounded-xl bg-white px-4 py-8 md:px-8 md:py-12">
  <h2 class="text-2xl font-semibold tracking-tight text-slate-900 md:text-4xl">Возможности</h2>
  <p class="mt-2 max-w-prose text-sm text-slate-600 md:text-base">Всё, что нужно команде для работы над проектами.</p>
  <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <div class="rounded-lg border border-slate-200 p-4 text-sm text-slate-700">Отчёты</div>
    <div class="rounded-lg border border-slate-200 p-4 text-sm text-slate-700">Задачи</div>
    <div class="rounded-lg border border-slate-200 p-4 text-sm text-slate-700">Календарь</div>
    <div class="rounded-lg border border-slate-200 p-4 text-sm text-slate-700">Файлы</div>
    <div class="rounded-lg border border-slate-200 p-4 text-sm text-slate-700">Права доступа</div>
    <div class="rounded-lg border border-slate-200 p-4 text-sm text-slate-700">Интеграции</div>
  </div>
</section>

Почему так: базовые классы задают мобильную версию, приставки добавляют изменения. Порядок в атрибуте не важен, но привычка писать «база → sm → md → lg» экономит время при чтении.

Решение задания 2

Логотип

Панель быстрых ссылок видна только между 640 и 1024px

<div class="space-y-2">
  <div class="rounded-lg border border-slate-200 bg-white px-4 py-3">
    <div class="flex items-center justify-between">
      <span class="text-sm font-semibold text-slate-900">Логотип</span>
      <button class="rounded-md border border-slate-300 p-1.5 text-slate-600 sm:hidden" aria-label="Меню">☰</button>
      <nav class="hidden gap-4 text-sm text-slate-600 lg:flex">
        <a href="#">Обзор</a><a href="#">Отчёты</a><a href="#">Настройки</a>
      </nav>
    </div>
  </div>
  <div class="hidden rounded-lg bg-slate-100 px-4 py-2 text-xs text-slate-600 sm:block lg:hidden">
    Панель быстрых ссылок видна только между 640 и 1024px
  </div>
</div>

Почему так: hidden sm:block lg:hidden — три состояния одним набором классов: скрыт, показан, снова скрыт.

Решение задания 3

Требуется подтверждение

В широком контейнере иконка слева.

Требуется подтверждение

В узком — сверху.

<div class="grid gap-4 md:grid-cols-[1fr_220px]">
  <div class="@container rounded-lg border border-slate-200 bg-white p-4">
    <div class="flex flex-col gap-3 @sm:flex-row @sm:items-start">
      <div class="size-10 shrink-0 rounded-full bg-amber-100 text-center text-lg leading-10">!</div>
      <div>
        <p class="text-sm font-semibold text-slate-900">Требуется подтверждение</p>
        <p class="mt-1 text-xs text-slate-600">В широком контейнере иконка слева.</p>
      </div>
    </div>
  </div>
  <div class="@container rounded-lg border border-slate-200 bg-white p-4">
    <div class="flex flex-col gap-3 @sm:flex-row @sm:items-start">
      <div class="size-10 shrink-0 rounded-full bg-amber-100 text-center text-lg leading-10">!</div>
      <div>
        <p class="text-sm font-semibold text-slate-900">Требуется подтверждение</p>
        <p class="mt-1 text-xs text-slate-600">В узком — сверху.</p>
      </div>
    </div>
  </div>
</div>

Почему так: компонент ничего не знает о странице. Его можно положить в сайдбар, в модальное окно или в широкую колонку — раскладка подстроится сама. Именно так проектируют компоненты в дизайн-системах.