Grid 예시 / tailwind

 

<div
 class="py-2 px-8 max-w-full w-full h-[calc(100vh-60px)] text-white bg-gray-800 grid grid-cols-4 gap-2 auto-rows-fr  gap-y-"
>
    <div class="col-span-1 bg-red-300 row-span-2">
        영역 1
    </div>
    <div class="col-span-1 bg-red-300 row-span-2">
        영역 2
    </div>
    <div class="col-span-1 bg-red-300 row-span-2">
        영역 3
    </div>
    <div class="col-span-1 bg-red-300 row-span-2">
        영역 4
    </div>

    <div class="col-span-3 bg-red-300 row-span-2">
        <!-- <div>모니터링 차트</div> -->
        <div class="flex h-1/2">
                    영역 5-1
        </div>
        <div class="flex h-1/2">
                    영역 5-2
        </div>
    </div>
    <div class="col-span-1 bg-red-300 row-span-2">영역 6</div>
	</div>