CSS / Tutorial / Grid / grid-auto-rows

grid-auto-rows는 CSS Grid에서 명시적으로 크기를 정하지 않은 행의 크기 규칙을 지정합니다. 아이템이 늘어 새 행이 생겨도 같은 규칙이 적용되지만, grid-template-rows로 이미 크기를 정한 행을 덮어쓰지는 않습니다. 내용에 따라 늘어나는 행이 필요하면 minmax(72px, auto)처럼 최소 높이와 자동 크기를 조합할 수 있습니다.

명시적 행과 암시적 행의 차이

grid-template-columns·grid-template-rows 등으로 정의한 격자가 명시적 그리드이고, 그 범위를 벗어난 아이템을 담기 위해 생기는 트랙이 암시적 트랙입니다. 기본적인 행 방향 자동 배치에서는 정한 열이 차면 다음 행이 생깁니다. 아이템을 범위 밖의 행 번호에 직접 배치해도 암시적 행이 생길 수 있으므로 아이템 수만으로 구분하는 것은 충분하지 않습니다.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 72px;
  grid-auto-rows: minmax(72px, auto);
}

이 선언은 첫 행을 72px로 명시하고, 그 뒤에 필요한 행은 최소 72px이면서 콘텐츠에 맞춰 커지게 합니다. grid-auto-rows의 초기값은 auto입니다. 행을 몇 개 만들지를 이 속성이 정하는 것은 아니며, 필요한 행의 수는 아이템 배치와 열 정의 등의 결과로 결정됩니다.

전체 예제: 첫 행은 고정하고 새 행은 내용에 맞추기

아래 코드를 grid-auto-rows.html로 저장해 브라우저에서 엽니다. 외부 파일이나 JavaScript는 필요하지 않습니다. 노란색 첫 행은 명시적 행이고 나머지는 아이템을 담으려고 생긴 암시적 행입니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>명시적 행과 암시적 행의 크기</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: 72px; grid-auto-rows: minmax(72px, auto);
      gap: 10px; max-width: 600px; }
    .item { min-width: 0; padding: 12px; border: 1px solid #7795a3;
      background: #edf5f7; overflow-wrap: anywhere; }
    .item:nth-child(-n+2) { background: #fff2cf; }
  </style>
</head>
<body>
<h1>grid-auto-rows 비교</h1>
<div class="grid">
  <div class="item">가: 첫 행</div>
  <div class="item">나: 첫 행</div>
  <div class="item">다: 새 행</div>
  <div class="item">라: 새 행</div>
  <div class="item long">마: 내용이 긴 아이템입니다. 이 행은 최소 높이보다 내용이 길면 필요한 높이까지 커집니다. 다른 짧은 행까지 모두 같은 높이로 늘어나는 것은 아닙니다.</div>
  <div class="item">바: 같은 행</div>
  <div class="item">사: 새 행</div>
  <div class="item">아: 새 행</div>
</div>
</body>
</html>

첫 행은 72px, 짧은 암시적 행은 최소 72px로 표시됩니다. 마·바가 있는 행은 마의 설명이 길면 그 내용을 담을 만큼 높아집니다. 바도 기본 정렬로 같은 행 높이를 채우지만 다른 짧은 행의 높이는 그대로입니다. 창을 좁히면 문장이 더 많이 줄바꿈되어 긴 행이 더 높아질 수 있습니다.

컨테이너 높이를 따로 제한하지 않았기 때문에 늘어난 행만큼 문서도 길어집니다. 카드 자체에는 고정 height를 넣지 않았습니다. 행 크기와 카드의 자체 높이를 동시에 고정하면 어떤 설정 때문에 내용이 넘치는지 구분하기 어려우므로, 먼저 트랙의 크기를 정하고 아이템의 실제 상자를 확인하세요.

고정 크기·최소 크기·비율과 반복 패턴 선택

전체 예제의 grid-auto-rows만 72px로 바꿔 보세요. 첫 행은 그대로이고, 긴 내용이 있는 암시적 행도 72px가 되어 문장이 다음 영역으로 넘칠 수 있습니다. 내용을 숨겨 문제를 덮기보다 minmax(72px, auto)로 복원해 필요한 공간을 허용하는 것이 이 예제의 목적에 맞습니다.

그다음 1fr로 바꾸면 이 예제의 높이가 제한되지 않은 암시적 행들은 큰 콘텐츠를 수용하는 같은 높이를 사용합니다. 명시적 첫 행은 여전히 72px입니다. 컨테이너의 고정 높이, 최소 크기, 여러 행을 차지하는 아이템이 있으면 결과를 별도로 판단해야 하며 1fr을 언제나 모든 행의 고정 높이로 해석하면 안 됩니다.

72px 112px처럼 여러 값을 주면 첫 암시적 행부터 72px·112px·72px 순으로 반복합니다. 명시적 첫 행부터 패턴을 세는 것이 아닙니다. 이 값들은 고정 크기이므로 긴 문장을 잠시 짧게 바꿔 패턴을 관찰한 뒤 원래 내용과 minmax 규칙으로 복원하세요. 값과 문법의 전체 범위는 MDN grid-auto-rows 문서에서 확인할 수 있습니다.

아이템 추가와 적용되지 않을 때 점검

전체 예제의 닫는 div 바로 앞에 다음 아이템을 추가하면 다섯째 행이 생깁니다. 행 개수에 맞춰 CSS 값을 추가하지 않아도 암시적 행 규칙이 적용됩니다. 실습을 마치면 새 아이템을 삭제해 처음 상태로 되돌릴 수 있습니다.

<div class="item">자: 새로 생긴 행</div>

모든 행에 같은 규칙을 적용하고 싶다면 이 예제의 grid-template-rows: 72px 선언을 제거합니다. 그러면 첫 행도 암시적 행 규칙으로 크기를 정합니다. 반대로 특정 행이 바뀌지 않는다면 grid-template-rows나 grid-template-areas로 해당 행이 이미 정의되어 있는지, grid 단축 속성이 관련 설정을 초기화했는지 확인하세요.

행이 아니라 열이 늘어난다면 grid-auto-flow와 아이템의 명시적 배치도 확인합니다. grid-auto-rows는 행 크기, grid-auto-columns는 열 크기 규칙입니다. 퍼센트 행 크기는 컨테이너 높이가 콘텐츠에 의존하는지에 따라 계산 조건이 달라질 수 있으므로, 최소 높이와 콘텐츠 증가를 다루려는 목적에는 이 예제처럼 길이·auto 조합이 더 분명합니다. 암시적 격자의 정의는 CSS Grid 명세의 암시적 그리드 규칙을 참고할 수 있습니다.

기존 코드의 -ms-grid는 현재 Grid와 같은 자동 배치를 제공하는 단순 접두어 버전으로 취급하지 마세요. 이 예제는 표준 CSS Grid를 지원하는 브라우저를 대상으로 합니다. 별도의 구형 환경을 지원해야 한다면 지원 범위와 배치 대체 방식을 먼저 정하고 실제 대상 환경에서 검증해야 합니다.