CSS / Tutorial / Grid / 예제

CSS

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

CSS Grid는 같은 행에 있는 일반적인 카드들을 기본 정렬로 같은 높이에 맞춥니다. 행이 여러 개일 때 다른 행까지 모두 같은 높이로 만들려면, 높이를 고정하지 않은 컨테이너에서 grid-auto-rows: 1fr를 사용할 수 있습니다. 아래 예제는 기본 auto 행과 같은 비율의 행을 나란히 비교해, 내용이 긴 카드가 전체 배치에 미치는 영향을 보여 줍니다.

같은 행의 높이와 전체 행 높이는 다릅니다

Grid에서 행·열 사이의 공간을 트랙(Track)이라고 합니다. 각 아이템이 하나의 셀을 차지하고 별도의 높이·정렬을 지정하지 않은 일반적인 카드라면, 같은 행의 가장 큰 콘텐츠를 담을 수 있는 행이 만들어지고 다른 카드도 그 행 높이를 채웁니다. 그러나 기본 auto 행의 높이가 서로 다른 행까지 자동으로 같아지는 것은 아닙니다.

명시적인 행을 따로 만들지 않고 열만 두 개 정의하면 아이템 수에 맞춰 필요한 행이 암시적으로 생깁니다. 이 암시적 행의 크기를 grid-auto-rows로 정할 수 있습니다. 이 글에서는 컨테이너의 높이를 auto로 두고 모든 암시적 행을 1fr로 만들어 같은 행 크기를 사용합니다. 1fr은 1픽셀이나 1행이라는 뜻이 아니라 유연한 공간 배분의 비율입니다.

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  grid-auto-rows: 1fr;
}

전체 예제: 긴 카드가 있을 때의 차이

아래 전체 코드를 grid-equal-cards.html로 저장하고 브라우저에서 엽니다. 외부 파일이나 JavaScript는 필요하지 않습니다. 두 격자의 HTML 내용은 같고 두 번째에만 grid-auto-rows: 1fr를 적용했습니다.

<!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; } h2 { margin: 20px 0 8px; font-size: 18px; }
    .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px; max-width: 600px; }
    .card { min-width: 0; padding: 16px; border: 1px solid #7795a3;
      border-radius: 6px; background: #edf5f7; overflow-wrap: anywhere; }
    .card h3 { margin: 0 0 8px; font-size: 16px; }
    .card p { margin: 0; }
    .same { grid-auto-rows: 1fr; }
  </style>
</head>
<body>
<h1>Grid 카드 높이 비교</h1>
<h2>기본 auto 행</h2>
<div class="grid normal">
  <article class="card"><h3>카드 가</h3><p>짧은 설명입니다.</p></article>
  <article class="card"><h3>카드 나</h3><p>내용이 긴 카드입니다. 같은 행에서는 옆 카드도 같은 높이가 됩니다. 다른 행까지 같은 높이로 맞추려면 행 크기 설정을 함께 확인해야 합니다.</p></article>
  <article class="card"><h3>카드 다</h3><p>기본 설명입니다.</p></article>
  <article class="card"><h3>카드 라</h3><p>간단한 설명입니다.</p></article>
</div>
<h2>모든 행을 1fr로</h2>
<div class="grid same">
  <article class="card"><h3>카드 가</h3><p>짧은 설명입니다.</p></article>
  <article class="card"><h3>카드 나</h3><p>내용이 긴 카드입니다. 같은 행에서는 옆 카드도 같은 높이가 됩니다. 다른 행까지 같은 높이로 맞추려면 행 크기 설정을 함께 확인해야 합니다.</p></article>
  <article class="card"><h3>카드 다</h3><p>기본 설명입니다.</p></article>
  <article class="card"><h3>카드 라</h3><p>간단한 설명입니다.</p></article>
</div>
</body>
</html>

첫 격자는 가·나가 있는 첫 행이 길고 다·라가 있는 둘째 행은 짧습니다. 둘째 격자는 가장 큰 콘텐츠를 수용할 수 있도록 두 행의 높이가 같아져 네 카드가 모두 같은 높이가 됩니다. 글자 길이·폰트·창 너비에 따라 실제 픽셀 높이는 달라지지만 이 비교 관계를 확인할 수 있습니다.

grid-template-columns의 minmax(0, 1fr)는 각 열이 내용의 자동 최소 너비 때문에 예상보다 커지는 것을 줄이면서 같은 비율로 공간을 나누게 합니다. 카드에는 min-width: 0과 overflow-wrap: anywhere를 함께 지정해 긴 단어나 주소가 들어오는 경우도 고려했습니다. gap은 카드 사이 간격이며 컨테이너 바깥 여백은 아닙니다.

카드 수와 내용 길이를 바꾸어 확인하기

둘째 격자의 닫는 div 바로 앞에 아래 카드를 추가합니다. 두 열을 유지하므로 셋째 행이 생기고 그 행도 1fr 크기 규칙을 따릅니다. 마지막 행에 카드가 하나뿐이어도 그 카드가 두 열을 자동으로 합치지는 않으며 빈 셀은 남습니다.

<article class="card">
  <h3>카드 마</h3>
  <p>아이템이 추가되어 새 행이 만들어집니다.</p>
</article>

그다음 카드 나의 문단을 두세 개로 늘려 보세요. 기본 격자는 해당 행 중심으로 높이가 늘고, 같은 행 크기를 지정한 격자는 다른 행도 함께 커집니다. 내용을 되돌리고 추가 카드를 삭제하면 처음 상태로 복원됩니다. 둘째 격자의 grid-auto-rows 값을 auto로만 바꾸면 첫 격자와 같은 행 높이 방식으로 돌아옵니다.

grid-template-rows: 1fr 1fr처럼 두 행을 명시적으로 정의한 기존 코드도 두 행 안에서는 같은 높이를 만들 수 있습니다. 다만 아이템을 더 넣어 생긴 셋째 행은 grid-auto-rows의 규칙을 따릅니다. 모든 행을 같은 크기로 만들려는 목적이라면 명시적 행 선언을 제거하고 암시적 행 규칙을 일관되게 적용하는지 확인하세요. 이 속성의 적용 범위는 MDN grid-auto-rows 문서에 설명되어 있습니다.

작은 화면과 높이가 맞지 않는 경우

이 예제는 비교를 위해 좁은 화면에서도 두 열을 유지합니다. 실제 카드의 설명이 길어 읽기 어려우면 style 끝에 다음 미디어 쿼리를 추가해 480px 이하에서 한 열로 바꿀 수 있습니다. 동시에 행 크기를 auto로 바꾸면 한 열에서 모든 카드를 가장 긴 카드 높이에 억지로 맞추는 빈 공간도 줄일 수 있습니다.

@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
  .same { grid-auto-rows: auto; }
}

그리드 높이를 따로 제한하면 fr이 분배하는 공간과 콘텐츠 최소 크기가 함께 작용하므로, 이 예제와 같은 결과를 언제나 보장할 수는 없습니다. 줄마다 내용 크기가 크거나 카드가 여러 행을 차지하는 배치는 별도로 판단해야 합니다. 유연한 트랙 계산의 조건은 CSS Grid 명세의 fr 단위 규칙에서 확인할 수 있습니다.

카드 높이가 다르게 보이면 아이템에 height, max-height, align-self 또는 align-items: start 같은 설정이 있는지 확인합니다. Grid가 행을 크게 만들었더라도 아이템이 그 공간을 채우지 않도록 설정되어 있으면 카드의 보이는 상자 높이는 다를 수 있습니다. 높이를 고정하거나 overflow: hidden으로 내용을 감춰 모양만 맞추기 전에 내용이 모두 읽히는지 확인하세요.

CSS