CSS grid-auto-rows 속성이란?
grid-auto-rows 속성은 CSS 그리드 레이아웃에서 행(row)의 기본 크기를 지정할 때 사용합니다. 명시적으로 크기를 정의하지 않은 암시적(implicit) 행이 자동으로 생성될 때, 이 속성에 설정한 값이 해당 행에 일괄 적용됩니다.
예를 들어 grid-auto-rows: 60px;처럼 설정하면, 그리드 컨테이너 안에 배치되는 모든 행의 높이가 60px로 통일되어 레이아웃 전체의 균형을 유지하기가 훨씬 수월해집니다.
grid-auto-rows에 사용할 수 있는 주요 값
- 고정 크기 : px, em 등 절대 단위 (예:
60px) - 백분율 : 컨테이너 높이를 기준으로 한 비율 (예:
20%) - fr 단위 : 남은 가용 공간을 비율로 분배 (예:
1fr) - auto : 콘텐츠 크기에 맞춰 자동으로 조절
- minmax() : 최소·최대 크기 범위 지정 (예:
minmax(60px, auto))
예제 코드
아래 코드를 직접 실행해 보면 CSS에서 grid-auto-rows 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-auto-rows: 60px;
grid-gap: 10px;
background-color: red;
padding: 10px;
}
.container>div {
background-color: yellow;
text-align: center;
padding:10px 0;
font-size: 20px;
}
</style>
</head>
<body>
<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-auto-rows: 60px;— 생성되는 모든 행의 기본 높이를 60px로 설정합니다.grid-gap: 10px;— 행과 열 사이의 간격을 10px로 지정합니다.
실행 결과, 노란색 배경의 여섯 개 항목이 각각 60px 높이의 행에 균일하게 배치되는 것을 확인할 수 있습니다. 이처럼 grid-auto-rows를 활용하면 복잡한 계산 없이도 일관된 행 높이를 손쉽게 유지할 수 있습니다.