[CSS] Grid - 자동 행 높이(grid-auto-rows) 개념

grid-auto-rows는 Grid에서 “명시하지 않은 행(자동 생성되는 행)”의 높이를 정하는 속성입니다.
즉, 콘텐츠가 늘어나서 행이 추가될 때 새로 생기는 행의 기본 높이 규칙을 지정합니다.

 

1. 언제 “자동 행”이 생길까?

Grid에서는 보통 이렇게 행/열을 정의하죠.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

이때 아이템이 많아지면,
Grid는 아래쪽으로 행을 자동으로 계속 생성합니다.

 

그 “자동 생성된 행”의 높이를 정하는 게 grid-auto-rows입니다.

 

2. 기본값은?

기본은 auto에 가까운 동작(콘텐츠 높이에 맞춤)입니다.

 

그래서 아이템 높이가 들쭉날쭉하면
행 높이도 들쭉날쭉해질 수 있어요.

 

3. 자주 쓰는 값 패턴

1️⃣ 모든 자동 행 높이 고정

.container {
  display: grid;
  grid-auto-rows: 120px;
}

카드 리스트처럼 행 높이를 동일하게 만들고 싶을 때.

 

4. grid-template-rows랑 뭐가 달라?

• grid-template-rows : 처음부터 “명시적으로” 만든 행의 높이
• grid-auto-rows : 넘치면 “자동으로 생기는” 행의 높이

“추가로 생기는 행”을 제어하려면 grid-auto-rows가 정답입니다.

 

5. 정리하면

• grid-auto-rows = 자동으로 생성되는 행의 높이 규칙
• 카드 리스트에서 행 높이 통일/유연함 조절에 자주 사용
• minmax()와 조합하면 실무에서 가장 안정적