Код IT
← Каталог

Tailwind — готовые блоки — Bento-сетка (разные размеры ячеек)

Фрагмент из «Tailwind — готовые блоки»: Bento-сетка (разные размеры ячеек).

html lab1117 embed URL статья в энциклопедии
HTML main.html 
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bento grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 p-6">
  <div class="mx-auto grid max-w-3xl auto-rows-[8rem] gap-3 sm:grid-cols-2 lg:grid-cols-4">
    <div class="rounded-2xl bg-indigo-500 p-4 text-white lg:col-span-2 lg:row-span-2">Большой</div>
    <div class="rounded-2xl bg-emerald-500 p-4 text-white">A</div>
    <div class="rounded-2xl bg-amber-500 p-4 text-white">B</div>
    <div class="rounded-2xl bg-rose-500 p-4 text-white sm:col-span-2">Широкий</div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bento grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 p-6">
  <div class="mx-auto grid max-w-3xl auto-rows-[8rem] gap-3 sm:grid-cols-2 lg:grid-cols-4">
    <div class="rounded-2xl bg-indigo-500 p-4 text-white lg:col-span-2 lg:row-span-2">Большой</div>
    <div class="rounded-2xl bg-emerald-500 p-4 text-white">A</div>
    <div class="rounded-2xl bg-amber-500 p-4 text-white">B</div>
    <div class="rounded-2xl bg-rose-500 p-4 text-white sm:col-span-2">Широкий</div>
  </div>
</body>
</html>