grid-template-rows 속성이란?
CSS의 grid-template-rows 속성은 그리드(Grid) 레이아웃에서 행(row)의 개수와 각 행의 높이를 정의하는 데 사용됩니다. 이 속성에 공백으로 구분된 여러 개의 값을 지정하면, 각 값이 순서대로 첫 번째 행, 두 번째 행의 높이로 적용됩니다.
행의 크기는 px, %, fr, auto 등 다양한 단위로 지정할 수 있어, 고정 높이부터 화면 비율에 따른 유동적인 높이까지 유연하게 구현할 수 있습니다.
예제 코드
아래 코드는 grid-template-rows 속성을 사용해 높이가 각각 70px과 190px인 두 개의 행을 가진 그리드를 만드는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: blue;
grid-template-rows: 70px 190px;
padding: 20px;
grid-gap: 20px;
}
.container > div {
background-color: orange;
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>코드 설명
- display: grid; – 해당 요소를 그리드 컨테이너로 지정합니다.
- grid-template-rows: 70px 190px; – 첫 번째 행의 높이는 70px, 두 번째 행의 높이는 190px로 설정합니다.
- grid-gap: 20px; – 행과 열 사이의 간격을 20px로 지정합니다.
- .container > div – 그리드 안의 각 항목에 배경색, 테두리, 글자 크기 등 스타일을 적용합니다.
위 예제에서는 명시적으로 두 개의 행만 정의했기 때문에, 남은 항목들은 자동으로 생성되는 암시적 행(implicit rows)에 배치됩니다. 필요에 따라 grid-auto-rows 속성을 함께 사용하면 암시적 행의 높이도 일괄 조절할 수 있습니다.