자바스크립트 없이 카드 높이 맞추기? CSS Subgrid 실무 활용 완벽 가이드

자바스크립트(JS) 없이 CSS만으로 카드 레이아웃 내부 요소들의 높이를 완벽하게 맞추는 CSS Subgrid 활용법을 소개합니다. 2026년 웹 표준 정렬 기술로 브라우저 성능 최적화와 레이아웃 일관성을 동시에 잡는 실무 노하우를 확인하세요.

CSS Subgrid 실무 활용 완벽 가이드

 

🚀 카드 레이아웃의 영원한 숙제, '내부 요소 높이 맞추기'

웹 퍼블리싱 실무에서 가장 빈번하게 마주하는 디자인은 아마 '카드 리스트'일 것입니다. 문제는 각 카드의 제목이나 본문 텍스트 길이가 제각각이라는 점이죠. 어떤 카드는 제목이 한 줄이고, 어떤 카드는 세 줄이 넘어가면서 하단의 버튼 위치가 어긋나기 시작합니다. 그동안 우리는 이를 해결하기 위해 matchHeight 같은 자바스크립트 라이브러리를 쓰거나, 고정 높이를 강제하는 고육책을 써왔습니다. 하지만 이제 CSS Subgrid를 통해 이 모든 고충을 CSS 한 줄로 우아하게 해결할 수 있습니다.

---

💡 개념 이해: Subgrid란 무엇인가?

쉽게 비유하자면, Subgrid는 부모가 그려놓은 '눈금종이'를 자식 요소가 그대로 빌려 쓰는 것과 같습니다. 기존의 중첩 그리드(Nested Grid)는 자식 요소가 자신만의 새로운 눈금종이를 가졌다면, Subgrid는 부모의 그리드 라인(Track)을 그대로 상속받습니다. 덕분에 서로 다른 카드 안에 들어있는 제목 태그들이 마치 하나의 거대한 표에 들어있는 것처럼 서로의 높이를 인지하고 정렬될 수 있는 것입니다.

구분	일반 중첩 그리드 (Nested Grid)	CSS Subgrid
정렬 기준	자식 요소 내부에서 독립적 계산	부모 그리드의 트랙을 그대로 상속
일관성	카드별로 내부 높이가 달라짐	모든 카드의 내부 요소가 수평 정렬됨
복잡도	JS나 복잡한 계산 필요	subgrid 키워드 한 줄로 해결

 

🛠️ 핵심 문법: grid-template-rows: subgrid

Subgrid를 활성화하는 방법은 매우 간단합니다. 부모 요소를 display: grid로 설정한 뒤, 자식 요소에서 부모의 그리드 라인을 따를 축(행 또는 열)에 subgrid 값을 주면 됩니다.

/* 부모 컨테이너 */
.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 카드가 내부적으로 가질 4개 영역(이미지, 제목, 내용, 버튼)의 행 정의 */
  grid-template-rows: auto auto 1fr auto; 
}

/* 자식 카드 요소 */
.card-item {
  grid-row: span 4; /* 부모가 가진 4개의 행을 모두 차지하겠다고 선언 */
  display: grid;
  grid-template-rows: subgrid; /* 부모의 행 간격(눈금)을 그대로 빌려옴 */
}

 

반응형

 

🍳 실전 레시피: 완벽하게 정렬되는 3단 카드 UI

실무 프로젝트에 바로 복사해서 사용할 수 있는 코드입니다. 제목이 길어지더라도 모든 카드의 '상세보기' 버튼이 같은 높이에 위치하는 것을 볼 수 있습니다.

<!-- HTML 구조 -->
<div class="card-list">
  <article class="card">
    <div class="img">IMAGE</div>
    <h3>짧은 제목</h3>
    <p>본문 내용이 적습니다.</p>
    <button>더보기</button>
  </article>
  <article class="card">
    <div class="img">IMAGE</div>
    <h3>이 제목은 매우 길어서 두 줄 이상을 차지하게 됩니다</h3>
    <p>본문 내용이 상당히 많아서 카드 전체 높이에 영향을 줍니다.</p>
    <button>더보기</button>
  </article>
  <article class="card">
    <div class="img">IMAGE</div>
    <h3>중간 크기 제목</h3>
    <p>적당한 본문 내용입니다.</p>
    <button>더보기</button>
  </article>
</div>

/* CSS 스타일링 */
.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  /* 핵심: 각 카드가 내부적으로 4개의 행을 공유하도록 설정 */
  grid-template-rows: repeat(auto-fill, auto auto 1fr auto);
}

.card {
  display: grid;
  /* 부모의 4개 행을 점유 */
  grid-row: span 4;
  /* 부모의 행 트랙을 상속받아 모든 카드의 내부 요소 높이를 동기화 */
  grid-template-rows: subgrid;
  padding: 20px;
  border: 1px solid #ddd;
}

부모 그리드 라인이 자식 요소까지 관통하여 정렬 기준이 되는 모습

 

728x90

 

⚡ 시너지 효과: 컨테이너 쿼리와 Subgrid의 만남

지난 포스팅에서 다룬 컨테이너 쿼리(@container)와 Subgrid가 만나면 무적의 컴포넌트가 탄생합니다. 컨테이너 쿼리가 카드의 너비에 따라 레이아웃의 형태를 결정한다면, Subgrid는 그 안의 세부 요소들이 어떤 상황에서도 구조적 일관성을 유지하게 돕습니다. 독립적인 컴포넌트들이 모여 거대한 대시보드를 이룰 때, 이 둘의 조합은 퍼블리싱 소요 시간을 획기적으로 줄여줍니다.

 

반응형 웹의 혁명, CSS 컨테이너 쿼리(@container) 실무 완벽 가이드

 

🏁 마무리: 2026년 퍼블리셔의 디테일

자바스크립트로 DOM의 높이를 매번 계산하고 할당하던 시절은 지났습니다. Subgrid를 사용하면 브라우저가 레이아웃을 계산할 때 발생하는 Layout Thrashing(레이아웃 탈조) 현상을 방지하여 렌더링 성능이 비약적으로 향상됩니다.

현재 Chrome, Firefox, Safari를 포함한 모든 모던 브라우저가 Subgrid를 완벽히 지원하므로, 이제 실무에 도입하지 않을 이유가 없습니다. 한 끗 차이의 디테일이 명품 레이아웃을 만듭니다.

---

오늘은 자바스크립트 없이도 완벽한 정렬을 구현해 주는 CSS Subgrid의 실무 활용법을 알아보았습니다.

matchHeight와 같은 외부 라이브러리에 의존하던 과거에서 벗어나, 이제는 순수 CSS만으로 더 빠르고 가벼운 웹사이트를 만들 수 있습니다. 특히 오늘 배운 Subgrid를 컨테이너 쿼리와 함께 사용한다면 여러분의 퍼블리싱 생산성은 한 차원 더 높아질 것입니다.