AAtomic CSS

grid-auto-rows

암시적으로 생성되는 행(row)의 크기를 설정합니다. grid-template-rows로 정의하지 않은 행이 자동으로 생길 때 적용됩니다.

클래스 목록

클래스CSS설명
gar1frgrid-auto-rows: 1fr암시적 행을 균등 비율로 생성
gar5remgrid-auto-rows: 5rem암시적 행을 50px(5rem) 크기로 생성
gar10remgrid-auto-rows: 10rem암시적 행을 100px(10rem) 크기로 생성
gar100pxgrid-auto-rows: 100px암시적 행을 100px 고정 크기로 생성

사용 예시

정의된 행 수보다 아이템이 많을 때, 추가로 생성되는 행의 높이를 제어합니다.

<!-- 3열 그리드 + 암시적 행 높이 지정 -->
<div class="dg gtcr3-1fr gar10rem gap16px">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4 (새 행, 100px 높이)</div>
  <div>5</div>
</div>

<!-- 균등 높이 행 -->
<div class="dg gtcr2-1fr gar1fr gap16px">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

시각적 비교

기본 (auto) — 콘텐츠에 맞춤

1234

행 높이가 콘텐츠에 따라 자동 결정됩니다

gar10rem — gar10rem

1234

모든 행이 100px(10rem) 높이로 고정됩니다

팁 & 주의사항

카드 그리드에서 유용

카드 목록처럼 아이템 수가 유동적인 그리드에서 gar를 설정하면 모든 행의 높이를 일관되게 유지할 수 있습니다.

gtr vs gar

gtr(grid-template-rows)는 명시적 행을, gar는 암시적으로 추가되는 행을 제어합니다. 아이템 수가 가변적이라면 gar가 더 적합합니다.

grid-auto-columnsgrid-template-columnsgrid