CSS Grid 레이아웃에서 grid-template-rows 속성을 사용하면 그리드 컨테이너의 행 개수와 각 행의 높이를 한 번에 정의할 수 있습니다. 이 속성에는 픽셀(px), 퍼센트(%), fr 단위 등 다양한 크기 값을 공백으로 구분하여 나열합니다.
행 높이 지정 방식
예를 들어 grid-template-rows: 120px 90px 100px;처럼 작성하면 첫 번째 행은 120px, 두 번째 행은 90px, 세 번째 행은 100px의 높이를 가지게 됩니다. 값의 개수만큼 행이 생성되며, 나머지 요소들은 자동 배치 알고리즘에 따라 새로운 암시적(implicit) 행에 배치될 수 있습니다.
예제 코드
아래 코드를 직접 실행해 보면 3개의 행으로 구성된 그리드가 어떻게 만들어지는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: gray;
grid-template-rows: 120px 90px 100px;
padding: 20px;
grid-gap: 20px;
}
.container > div {
background-color: yellow;
border: 2px solid gray;
padding: 35px;
font-size: 30px;
text-align: center;
}
</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>코드 설명
위 예제에서는 6개의 자식 요소(div)가 3개의 행에 순서대로 배치됩니다. 각 행의 높이는 grid-template-rows에 지정된 값(120px, 90px, 100px)에 따라 결정되며, grid-gap: 20px; 설정 덕분에 행과 열 사이에 20px의 일정한 간격이 유지됩니다.
고정 픽셀 값 대신 fr 단위를 사용하면 남은 공간을 비율에 따라 분배할 수 있어 반응형 레이아웃을 만들 때 특히 유용합니다. 예를 들어 grid-template-rows: 1fr 2fr 1fr;로 지정하면 세 행이 1:2:1 비율로 화면 높이를 나누어 가집니다.