본문 바로가기

Design/Css

flex-grow 남은영역 채우기 / & Grid

  • flex-none : 패딩이나 높이를 준다.
  • flex-grow : 남은 영역 채우기 ( h-full 써주기 )
<div class="border flex flex-col">
  <div class="flex-none border-b">Title</div>
  
  <div class="flex-grow h-[20%]">
    <div class="grid grid-cols-2 grid-rows-2 h-full">
      <div class="border">1</div>
      <div class="border">2</div>
      <div class="border">3</div>
      <div class="border">4</div>
    </div>
  </div>
</div>