CSS Grid 레이아웃에서 행(Row) 크기 지정하기

CSS Grid 행 크기 지정 개요

CSS Grid 레이아웃에서 행의 개수와 각 행의 높이를 지정하려면 grid-template-rows 속성을 사용합니다. 이 속성에 값을 나열하는 순서대로 첫 번째 행부터 차례로 크기가 적용되며, 값의 개수만큼 행이 생성됩니다.

행 크기에는 다양한 단위를 사용할 수 있습니다.

auto: 콘텐츠 크기에 맞춰 자동으로 조절됩니다.
px, em 등 절대 단위: 고정된 크기로 지정됩니다.
%: 컨테이너 크기 기준의 백분율로 지정됩니다.
fr: 남은 공간을 비율에 따라 분배하는 유연한 단위입니다.

예제 코드

다음 예제는 grid-template-rows: auto auto;로 두 개의 행을 만들고, 첫 번째 요소(ele1)가 grid-row-start와 grid-row-end를 이용해 여러 행에 걸쳐 배치되는 모습을 보여줍니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: green;
            grid-template-rows: auto auto;
            padding: 20px;
            grid-gap: 20px;
         }
         .container > div {
            background-color: orange;
            border: 2px solid gray;
            padding: 35px;
            font-size: 30px;
            text-align: center;
         }
         .ele1 {
            grid-row-start: 1;
            grid-row-end: 6;
         }
      </style>
   </head>
   <body>
      <h1>Game Board</h1>
      <div class = "container">
         <div class = "ele1">1</div>
         <div class = "ele2">2</div>
         <div class = "ele3">3</div>
         <div class = "ele4">4</div>
         <div class = "ele5">5</div>
         <div class = "ele6">6</div>
      </div>
   </body>
</html>

코드 설명

.container에 display: grid;를 적용해 그리드 컨테이너로 설정했습니다.
grid-template-rows: auto auto;는 두 개의 행을 생성하며, 각 행의 높이는 내용물에 따라 자동 결정됩니다.
grid-gap: 20px;은 행과 열 사이의 간격을 20px로 지정합니다.
.ele1은 grid-row-start: 1;과 grid-row-end: 6;을 통해 1번째 줄부터 6번째 줄까지 세로로 병합되어 배치됩니다.

이처럼 grid-template-rows 속성과 행 배치 관련 속성을 함께 활용하면, 게임 보드나 대시보드처럼 복잡한 구조의 레이아웃도 손쉽게 구성할 수 있습니다.