Grid Example 01

by NOVUSIDEA

HTML

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div class="grid min-h-dvh gap-[calc(2dvh_+_2dvw_/_2)] p-[calc(2dvh_+_2dvw_/_2)] grid-cols-3 grid-rows-3 bg-zinc-800">
    <div class="bg-indigo-600 hover:bg-indigo-500 rounded-2xl row-span-2"></div>
    <div class="bg-indigo-600 hover:bg-indigo-500 rounded-2xl col-span-2"></div>
    <div class="bg-indigo-600 hover:bg-indigo-500 rounded-2xl"></div>
    <div class="bg-indigo-600 hover:bg-indigo-500 rounded-2xl"></div>
    <div class="bg-indigo-600 hover:bg-indigo-500 rounded-2xl col-span-3"></div>
</div>

CSS

body {
    margin: 0;
}