Урок 09. Домашнее задание: страница статистики

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

⚡ Кратко

Собрать страницу со статистикой: шапка, четыре метрики, широкий график, список последних событий. Всё на grid, адаптивно, без произвольных значений кроме шаблона сетки.

Задание

В проекте курса сделайте страницу «Статистика»:

  • заголовок и подзаголовок во всю ширину;
  • четыре карточки метрик: две колонки на мобильном, четыре от 1024px;
  • блок графика на 3/4 ширины и блок «События» на 1/4 (на широком экране);
  • на мобильном оба блока — во всю ширину;
  • карточки одной строки одинаковой высоты.

Подготовка окружения

cd tailwind-course
npm run dev

Пошаговое решение

Шаг 1. Контейнер сетки

grid grid-cols-2 gap-4 lg:grid-cols-4. Все блоки — прямые дети этой сетки, включая заголовок с col-span-full.

Шаг 2. Метрики

Каждая карточка — обычный блок; сетка сама расставит их по колонкам. Числа помечайте tabular-nums, чтобы они не «прыгали».

Шаг 3. График и события

График: col-span-2 lg:col-span-3. События: col-span-2 lg:col-span-1. Так на мобильном оба блока занимают всю ширину, а на большом экране делят строку 3 к 1.

Шаг 4. Выравнивание высот

Добавьте контейнеру auto-rows-fr — строки станут равной высоты, и карточки метрик выровняются.

Как проверить

  • При 320px все блоки читаемы, прокрутки по горизонтали нет.
  • При 1280px метрики стоят в один ряд, график занимает 3/4.
  • Заголовок всегда во всю ширину.
  • Карточки в строке одинаковой высоты.

Ориентир

Статистика

Данные за последние 7 дней

Визиты

24 190

Регистрации

512

Покупки

143

Отказы

7,2%

График

События

  • Новый заказ № 1044
  • Отчёт выгружен
  • Добавлен участник
<div class="grid grid-cols-2 gap-4 auto-rows-fr lg:grid-cols-4">
  <div class="col-span-full">
    <h2 class="text-lg font-semibold text-slate-900">Статистика</h2>
    <p class="text-sm text-slate-600">Данные за последние 7 дней</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">24 190</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">512</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">143</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">7,2%</p>
  </div>
  <div class="col-span-2 rounded-xl border border-slate-200 bg-white p-4 lg:col-span-3">
    <p class="text-sm font-semibold text-slate-900">График</p>
    <div class="mt-3 flex h-24 items-end gap-2">
      <div class="h-1/4 flex-1 rounded-t bg-indigo-400"></div>
      <div class="h-1/2 flex-1 rounded-t bg-indigo-400"></div>
      <div class="h-3/4 flex-1 rounded-t bg-indigo-500"></div>
      <div class="h-full flex-1 rounded-t bg-indigo-600"></div>
      <div class="h-2/3 flex-1 rounded-t bg-indigo-500"></div>
    </div>
  </div>
  <div class="col-span-2 rounded-xl border border-slate-200 bg-white p-4 lg:col-span-1">
    <p class="text-sm font-semibold text-slate-900">События</p>
    <ul class="mt-2 space-y-2 text-xs text-slate-600">
      <li>Новый заказ № 1044</li>
      <li>Отчёт выгружен</li>
      <li>Добавлен участник</li>
    </ul>
  </div>
</div>