CSS의 grid-auto-rows 속성은 그리드 레이아웃에서 암시적(implicit) 행의 높이를 지정할 때 사용합니다. 명시적으로 grid-template-rows로 정의되지 않은 행, 즉 콘텐츠가 늘어나면서 자동으로 생성되는 행들의 크기를 일괄적으로 설정할 수 있습니다.
주요 특징
- 그리드 아이템 개수가 늘어나 새로운 행이 생성될 때 해당 행의 높이를 자동으로 결정합니다.
px,%,fr,auto등 다양한 단위를 사용할 수 있습니다.grid-auto-columns속성과 함께 사용하면 암시적 트랙 전체를 제어할 수 있습니다.
예제 코드
아래 예제에서는 grid-auto-rows 속성을 50px로 설정하여, 그리드 컨테이너 안의 모든 행이 50픽셀 높이로 균일하게 배치됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-auto-rows: 50px;
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: 50px; – 생성되는 모든 행의 높이를 50px로 고정합니다.
- grid-gap: 10px; – 행과 열 사이에 10px 간격을 부여합니다.
위 코드를 실행하면 빨간색 배경의 그리드 컨테이너 안에 노란색 카드들이 3열 × 2행 구조로 배치되며, 각 행은 50px 높이로 균일하게 표시됩니다. 만약 아이템이 더 추가되어 새로운 행이 생기더라도 같은 규칙이 적용됩니다.