Урок 09. Примеры: шесть сеток

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <article class="rounded-xl border border-slate-200 bg-white p-4">
    <h3 class="text-sm font-semibold text-slate-900">Отчёты</h3>
    <p class="mt-1 text-sm text-slate-600">Выгрузка данных по проектам.</p>
  </article>
  <article class="rounded-xl border border-slate-200 bg-white p-4">
    <h3 class="text-sm font-semibold text-slate-900">Команда</h3>
    <p class="mt-1 text-sm text-slate-600">Участники и роли.</p>
  </article>
  <article class="rounded-xl border border-slate-200 bg-white p-4">
    <h3 class="text-sm font-semibold text-slate-900">Настройки</h3>
    <p class="mt-1 text-sm text-slate-600">Уведомления и доступы.</p>
  </article>
</div>

<div class="grid grid-cols-2 gap-4 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-2xl font-semibold tabular-nums text-slate-900">1,2 млн</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-2xl font-semibold tabular-nums text-slate-900">348</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-2xl font-semibold tabular-nums text-slate-900">3,4%</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-2xl font-semibold tabular-nums text-slate-900">12</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/3 flex-1 rounded-t bg-sky-500"></div>
      <div class="h-2/3 flex-1 rounded-t bg-sky-500"></div>
      <div class="h-1/2 flex-1 rounded-t bg-sky-500"></div>
      <div class="h-full flex-1 rounded-t bg-sky-600"></div>
      <div class="h-3/4 flex-1 rounded-t bg-sky-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-1 text-xs text-slate-600">
      <li>Согласовать бюджет</li>
      <li>Обновить прайс</li>
      <li>Ответить в поддержке</li>
    </ul>
  </div>
</div>

<div class="grid grid-cols-4 gap-3">
  <div class="col-span-2 row-span-2 rounded-lg bg-linear-to-br from-sky-400 to-indigo-500 p-4 text-sm text-white">Главное фото</div>
  <div class="rounded-lg bg-slate-200 py-8"></div>
  <div class="rounded-lg bg-slate-200 py-8"></div>
  <div class="rounded-lg bg-slate-200 py-8"></div>
  <div class="rounded-lg bg-slate-200 py-8"></div>
</div>

<div class="grid h-56 grid-cols-[180px_1fr] grid-rows-[auto_1fr_auto] gap-3 rounded-lg border border-slate-200 bg-white p-3">
  <header class="col-span-2 rounded-md bg-slate-900 px-3 py-2 text-xs text-white">Шапка (col-span-2)</header>
  <aside class="rounded-md bg-slate-100 p-3 text-xs text-slate-600">Сайдбар</aside>
  <main class="rounded-md bg-slate-50 p-3 text-xs text-slate-600">Контент</main>
  <footer class="col-span-2 rounded-md bg-slate-100 px-3 py-2 text-xs text-slate-500">Футер</footer>
</div>

<form class="grid max-w-lg grid-cols-1 gap-4 sm:grid-cols-2">
  <div>
    <label class="mb-1 block text-sm font-medium text-slate-700" for="g-first">Имя</label>
    <input id="g-first" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm" placeholder="Иван">
  </div>
  <div>
    <label class="mb-1 block text-sm font-medium text-slate-700" for="g-last">Фамилия</label>
    <input id="g-last" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm" placeholder="Петров">
  </div>
  <div class="sm:col-span-2">
    <label class="mb-1 block text-sm font-medium text-slate-700" for="g-mail">Почта</label>
    <input id="g-mail" type="email" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm" placeholder="name@example.com">
  </div>
  <div class="sm:col-span-2">
    <button class="w-full rounded-md bg-slate-900 px-3 py-2 text-sm font-medium text-white sm:w-auto">Отправить</button>
  </div>
</form>

<div class="grid gap-3 grid-cols-[repeat(auto-fill,minmax(160px,1fr))]">
  <div class="rounded-lg bg-emerald-100 p-3 text-xs text-emerald-900">Тег 1</div>
  <div class="rounded-lg bg-emerald-100 p-3 text-xs text-emerald-900">Тег 2</div>
  <div class="rounded-lg bg-emerald-100 p-3 text-xs text-emerald-900">Тег 3</div>
  <div class="rounded-lg bg-emerald-100 p-3 text-xs text-emerald-900">Тег 4</div>
  <div class="rounded-lg bg-emerald-100 p-3 text-xs text-emerald-900">Тег 5</div>
</div>