grid-template-columns, grid-template-rows

CSS

작성일 2026-10-27 최근 수정일 2026-10-27

grid-template-columns는 명시적 열의 크기를, grid-template-rows는 명시적 행의 크기를 정의합니다. 열을 80px minmax(0, 1fr) minmax(0, 2fr)로 정하면 첫 열은 80px이고, 나머지 두 열은 간격 등을 제외한 공간을 1:2로 나눕니다. 행을 정한 개수보다 아이템이 많아지면 추가 행이 생길 수 있으며 그 크기는 grid-auto-rows로 제어합니다.

열과 행을 정의하는 기본 문법

.grid {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
  grid-template-rows: 80px 120px;
}

이 문법은 세 열과 두 행의 크기를 정의합니다. 각 트랙 사이에는 그리드 선이 있으므로 열 세 개에는 열 선 네 개가 생깁니다. repeat()나 선 이름 같은 문법도 있으므로 공백으로 나눈 토큰의 개수를 그대로 열 개수로 세기보다는 실제 트랙 정의를 확인해야 합니다.

두 속성의 초기값 none은 해당 축의 명시적 트랙을 따로 만들지 않는다는 뜻입니다. Grid 컨테이너가 사라지거나 아이템을 담을 열·행이 절대 생기지 않는다는 뜻은 아닙니다. 자동 배치나 범위 밖의 명시적 아이템 위치 때문에 암시적 트랙이 생길 수 있습니다.

값	크기를 판단할 때의 의미
80px	해당 트랙의 고정 길이입니다. 큰 내용은 넘칠 수 있습니다.
50%	해당 축 컨테이너 크기를 기준으로 합니다. gap까지 포함해 남은 공간의 절반을 자동 계산하는 값은 아닙니다.
auto	콘텐츠와 크기·정렬 조건에 따라 정해집니다. 언제나 단순한 나머지 전부라는 뜻은 아닙니다.
1fr	유연하게 배분할 공간의 비율입니다. 자동 최소 크기의 영향도 받을 수 있습니다.
minmax(0, 1fr)	트랙의 최소값을 0으로 허용하고 유연한 공간을 나눕니다. 안의 콘텐츠 처리도 함께 정해야 합니다.

전체 예제: 고정 열·비율 열과 늘어나는 행

아래 코드를 grid-tracks.html로 저장하고 브라우저에서 엽니다. 외부 파일이나 JavaScript는 필요하지 않습니다. 첫 행은 72px, 둘째 행은 최소 96px이며, 사가 들어가는 셋째 행은 암시적으로 생깁니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Grid 열 너비와 행 높이 정의</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; max-width: 600px; padding: 12px;
      grid-template-columns: 80px minmax(0, 1fr) minmax(0, 2fr);
      grid-template-rows: 72px minmax(96px, auto);
      grid-auto-rows: minmax(56px, auto); gap: 12px;
      border: 1px solid #7795a3; background: #edf5f7; }
    .item { min-width: 0; padding: 8px; border: 1px solid #176f80;
      background: white; overflow-wrap: anywhere; }
    .item:nth-child(-n+3) { background: #fff2cf; }
  </style>
</head>
<body>
<h1>열과 행 크기 비교</h1>
<div class="grid">
  <div class="item">가</div><div class="item">나</div><div class="item">다</div>
  <div class="item">라</div><div class="item">마</div>
  <div class="item">바: 내용이 길어지면 이 행은 최소 높이를 넘어 필요한 공간까지 늘어납니다. 고정 높이와 자동 높이의 차이를 확인하세요.</div>
  <div class="item">사</div>
</div>
</body>
</html>

첫 열의 너비는 80px로 유지되고 뒤의 두 열은 남은 공간을 1:2로 나눕니다. 첫 행은 노란색이며 고정 높이입니다. 바의 문장이 길어지는 둘째 행은 96px보다 커질 수 있고, 사가 있는 셋째 행은 grid-auto-rows에 따라 최소 56px로 표시됩니다. 행 수를 두 개 정의했다고 세 번째 행의 아이템이 사라지는 것이 아닙니다.

컨테이너가 최대 너비 600px일 때 border-box 기준으로 테두리 2px와 좌우 padding 24px를 빼면 내용 너비는 574px입니다. 여기서 열 사이 gap 두 개 24px와 첫 열 80px를 빼면 470px가 남습니다. 뒤의 열은 약 156.67px와 313.33px가 됩니다. 화면이 좁아지면 고정 열은 유지되고 뒤의 비율 열이 줄어듭니다.

repeat()로 같은 크기와 패턴 반복하기

같은 크기 세 열을 만들려면 전체 예제의 grid-template-columns 값만 아래처럼 바꿉니다. minmax를 포함한 하나의 트랙 정의를 세 번 반복하므로 세 열이 만들어집니다. 비교한 뒤 원래의 80px·1fr·2fr 구성으로 되돌릴 수 있습니다.

grid-template-columns: repeat(3, minmax(0, 1fr));

반복할 패턴에 트랙이 두 개 들어 있으면 열 수도 그만큼 늘어납니다. 예를 들어 repeat(2, minmax(0, 1fr) minmax(0, 2fr))는 1:2 패턴을 두 번 반복한 네 열입니다. repeat의 첫 수가 항상 전체 열 수라고 생각하면 이 구문을 잘못 읽게 됩니다.

/* 1:2 비율 패턴을 두 번 반복한 네 열 */
grid-template-columns: repeat(2, minmax(0, 1fr) minmax(0, 2fr));

이 예제처럼 행 높이를 고정하지 않고 콘텐츠에 맞춰 늘어나게 하려면 minmax(96px, auto)를 사용할 수 있습니다. 최소값 위치에는 1fr 같은 유연한 크기를 넣지 않습니다. 함수의 범위와 조건은 MDN minmax() 문서에서 확인할 수 있습니다.

넘침·콘텐츠 최소 크기·작은 화면 점검

1fr 2fr처럼 쓴 트랙은 콘텐츠의 자동 최소 크기에 막혀 단순한 1:2 너비가 되지 않을 수 있습니다. 전체 예제에서는 minmax(0, …)와 아이템의 min-width: 0으로 축소를 허용하고 긴 문자열은 overflow-wrap: anywhere로 줄바꿈하게 했습니다. 이미지나 코드처럼 텍스트 줄바꿈만으로 해결되지 않는 콘텐츠에는 최대 너비나 내부 스크롤을 별도로 검토해야 합니다.

퍼센트 열의 합계를 100%로 정한 뒤 gap을 추가하면 전체 너비가 넘칠 수 있습니다. 고정 열과 큰 최소 너비가 화면보다 넓어지는 경우도 있습니다. 열 너비를 줄이는 것이 목적에 맞는지, 열 수를 줄여야 하는지 판단하세요. 다음 코드를 style 끝에 추가하면 480px 이하에서 한 열로 바꾸고 명시적 행 높이도 해제합니다.

@media (max-width: 480px) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: minmax(56px, auto);
  }
}

한 열로 바뀌면 아이템은 가·나·다·라·마·바·사 순서로 이어지고, 긴 내용의 행만 필요한 높이까지 커집니다. 미디어 쿼리를 제거하면 원래 세 열로 복원됩니다. 행의 fr 계산도 컨테이너 높이가 정해졌는지에 영향을 받으므로 열 너비 비율과 고정 높이의 공간 분배를 같은 조건으로 가정하지 마세요.

적용되지 않으면 부모의 display 계산값, 명시적 트랙과 암시적 트랙, 뒤의 grid 단축 선언에 의한 초기화를 확인합니다. 각 속성의 상세 문법과 예외는 grid-template-columns 문서와 grid-template-rows 문서를 참고할 수 있습니다.

CSS