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

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

⚡ Кратко

Три решения с живым результатом и объяснением.

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

Каталог

Товар 1

1 200 ₽

Товар 2

2 400 ₽

Товар 3

890 ₽

Товар 4

3 150 ₽

<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  <h2 class="col-span-full text-lg font-semibold text-slate-900">Каталог</h2>
  <article class="rounded-xl border border-slate-200 bg-white p-4">
    <div class="h-20 rounded-md bg-slate-100"></div>
    <h3 class="mt-3 text-sm font-medium text-slate-900">Товар 1</h3>
    <p class="text-sm text-slate-500">1 200 ₽</p>
  </article>
  <article class="rounded-xl border border-slate-200 bg-white p-4">
    <div class="h-20 rounded-md bg-slate-100"></div>
    <h3 class="mt-3 text-sm font-medium text-slate-900">Товар 2</h3>
    <p class="text-sm text-slate-500">2 400 ₽</p>
  </article>
  <article class="rounded-xl border border-slate-200 bg-white p-4">
    <div class="h-20 rounded-md bg-slate-100"></div>
    <h3 class="mt-3 text-sm font-medium text-slate-900">Товар 3</h3>
    <p class="text-sm text-slate-500">890 ₽</p>
  </article>
  <article class="rounded-xl border border-slate-200 bg-white p-4">
    <div class="h-20 rounded-md bg-slate-100"></div>
    <h3 class="mt-3 text-sm font-medium text-slate-900">Товар 4</h3>
    <p class="text-sm text-slate-500">3 150 ₽</p>
  </article>
</div>

Почему так: заголовок внутри сетки — это тоже элемент, поэтому ему нужен col-span-full, иначе он займёт одну ячейку.

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

Пользователи

12 480

Активные

3 921

Средний чек

2 310 ₽

Отток

1,8%

Динамика за неделю

<div class="grid grid-cols-2 gap-4 auto-rows-fr lg:grid-cols-4">
  <div class="rounded-xl border border-slate-200 bg-white p-4">
    <p class="text-xs text-slate-500">Пользователи</p>
    <p class="mt-1 text-xl font-semibold tabular-nums text-slate-900">12 480</p>
  </div>
  <div class="rounded-xl border border-slate-200 bg-white p-4">
    <p class="text-xs text-slate-500">Активные</p>
    <p class="mt-1 text-xl font-semibold tabular-nums text-slate-900">3 921</p>
  </div>
  <div class="rounded-xl border border-slate-200 bg-white p-4">
    <p class="text-xs text-slate-500">Средний чек</p>
    <p class="mt-1 text-xl font-semibold tabular-nums text-slate-900">2 310 ₽</p>
  </div>
  <div class="rounded-xl border border-slate-200 bg-white p-4">
    <p class="text-xs text-slate-500">Отток</p>
    <p class="mt-1 text-xl font-semibold tabular-nums text-slate-900">1,8%</p>
  </div>
  <div class="col-span-full rounded-xl border border-slate-200 bg-white p-4">
    <p class="text-sm font-semibold text-slate-900">Динамика за неделю</p>
    <div class="mt-3 flex h-20 items-end gap-2">
      <div class="h-1/2 flex-1 rounded-t bg-emerald-500"></div>
      <div class="h-2/3 flex-1 rounded-t bg-emerald-500"></div>
      <div class="h-1/3 flex-1 rounded-t bg-emerald-500"></div>
      <div class="h-full flex-1 rounded-t bg-emerald-600"></div>
      <div class="h-3/4 flex-1 rounded-t bg-emerald-500"></div>
    </div>
  </div>
</div>

Почему так: auto-rows-fr делает строки равной высоты, поэтому карточки метрик выравниваются, даже если в одной текст длиннее.

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

Аналитика Интерфейсы Данные Инфраструктура

<div class="grid gap-3 grid-cols-[repeat(auto-fit,minmax(180px,1fr))]">
  <span class="rounded-lg bg-slate-100 px-3 py-2 text-sm text-slate-700">Аналитика</span>
  <span class="rounded-lg bg-slate-100 px-3 py-2 text-sm text-slate-700">Интерфейсы</span>
  <span class="rounded-lg bg-slate-100 px-3 py-2 text-sm text-slate-700">Данные</span>
  <span class="rounded-lg bg-slate-100 px-3 py-2 text-sm text-slate-700">Инфраструктура</span>
</div>

Почему так: шаблон repeat(auto-fit,minmax(180px,1fr)) сам решает, сколько колонок помещается. Это единственный способ сделать сетку, которая корректно работает и внутри узкого сайдбара, и на всю ширину экрана.