CSS Subgrid 사용법, 카드 UI 정렬을 쉽게 맞추는 방법

카드 UI를 만들다 보면 제목 길이, 설명 문장 수, 버튼 위치가 카드마다 달라져 정렬이 어긋나는 경우가 있습니다. CSS Grid를 사용해 카드 목록을 배치해도 카드 내부 요소까지 같은 기준으로 맞추기는 쉽지 않습니다.

이럴 때 활용할 수 있는 기능이 CSS Subgrid입니다. Subgrid는 부모 Grid의 행이나 열 기준을 자식 Grid에서도 그대로 사용할 수 있게 해주는 CSS 기능입니다. 카드 안의 제목, 설명, 버튼 영역을 같은 줄 기준으로 맞추고 싶을 때 유용합니다.

카드 UI에서 정렬이 어긋나는 이유

홈페이지 템플릿이나 포트폴리오 목록에서는 같은 형태의 카드가 반복해서 사용됩니다. 예를 들어 이미지, 제목, 설명, 버튼으로 구성된 카드가 3개 나란히 배치되는 구조입니다.

문제는 각 카드에 들어가는 콘텐츠 길이가 다를 때 생깁니다. 어떤 카드는 제목이 한 줄이고, 어떤 카드는 두 줄입니다. 설명 문장도 카드마다 길이가 달라질 수 있습니다. 그러면 버튼 위치가 위아래로 달라지고, 전체 카드 목록이 정돈되지 않아 보입니다.

CSS Grid로 카드들을 나란히 배치할 수는 있지만, 카드 내부의 제목·본문·버튼 영역까지 같은 기준으로 맞추려면 추가적인 처리가 필요합니다.

CSS Subgrid란 무엇인가요?

CSS Subgrid는 중첩된 Grid가 부모 Grid의 행 또는 열 구조를 이어받도록 만드는 기능입니다.

일반적으로 자식 요소에 다시 display: grid를 적용하면 그 Grid는 부모 Grid와 별개의 기준을 갖습니다. 그래서 부모 Grid의 줄 간격이나 행 높이를 자식 Grid 내부에서 그대로 맞추기 어렵습니다.

Subgrid를 사용하면 자식 Grid가 독립적인 기준을 새로 만드는 대신, 부모 Grid의 행이나 열 기준을 공유할 수 있습니다.

.card-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.card {
    display: grid;
    grid-template-rows: subgrid;
}

이 방식은 카드 내부 요소들을 같은 행 기준으로 정렬하고 싶을 때 활용할 수 있습니다.

기본 Grid와 Subgrid의 차이

일반 Grid는 부모와 자식이 각각 독립적으로 동작합니다.

.card {
    display: grid;
    grid-template-rows: auto auto auto;
}

이렇게 작성하면 각 카드가 자기 콘텐츠 길이에 맞춰 행 높이를 정합니다. 카드마다 제목이나 설명 길이가 다르면 내부 정렬도 달라질 수 있습니다.

반면 Subgrid는 부모 Grid의 기준을 자식 요소가 함께 사용합니다.

.card {
    display: grid;
    grid-template-rows: subgrid;
}

이렇게 하면 카드 내부의 제목, 설명, 버튼 영역을 같은 구조로 맞추기 쉬워집니다. 특히 여러 카드가 같은 줄에 놓이는 레이아웃에서 버튼 위치를 일정하게 맞추는 데 도움이 됩니다.

카드 UI에 Subgrid를 적용하는 예시

예를 들어 카드 목록을 만들 때 전체 구조는 아래처럼 잡을 수 있습니다.

.card-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 12px;
}

이 구조에서는 카드가 부모 Grid의 행 기준을 따라가면서 내부 요소를 배치할 수 있습니다.

<div class="card-list">
    <article class="card">
        <h3>카드 제목</h3>
        <p>카드 설명 문장입니다.</p>
        <a href="#">자세히 보기</a>
    </article>
</div>

카드 제목이나 설명 길이가 조금 달라도, 버튼 영역을 같은 기준에 맞추기 쉬워집니다. 상품 목록, 서비스 소개, 포트폴리오 카드, 가격표처럼 반복되는 UI에서 특히 유용합니다.



Subgrid를 쓰기 좋은 상황

Subgrid는 모든 Grid 레이아웃에 반드시 필요한 기능은 아닙니다. 하지만 아래와 같은 상황이라면 적용을 검토해볼 수 있습니다.

단순히 카드 2~3개를 나란히 배치하는 정도라면 일반 Grid나 Flex만으로도 충분할 수 있습니다. Subgrid는 내부 정렬 기준까지 맞춰야 할 때 효과가 큽니다.

Subgrid를 사용하지 않아도 되는 경우

모든 카드가 같은 양의 콘텐츠를 가지고 있거나, 버튼 위치가 조금 달라도 문제가 없는 디자인이라면 굳이 Subgrid를 사용할 필요는 없습니다.

또한 단순한 가로 정렬이나 모바일 전환 정도라면 기존 CSS Grid, Flexbox, Media Queries만으로도 충분합니다. Subgrid는 레이아웃을 더 정교하게 맞추는 기능이기 때문에, 실제로 정렬 문제가 있는 화면에 적용하는 편이 좋습니다.

적용 전 체크리스트

Subgrid는 정렬 문제를 해결하는 데 유용하지만, 구조가 단순한 화면에 무조건 적용할 필요는 없습니다. 먼저 카드 UI에서 어떤 부분이 어긋나는지 확인한 뒤 적용하는 것이 좋습니다.

자주 묻는 질문

카드 UI는 내부 정렬까지 봐야 합니다

카드 UI는 겉으로는 단순해 보여도 실제 작업에서는 제목 길이, 설명 문장 수, 버튼 위치 때문에 정렬이 쉽게 어긋납니다. 이때 Subgrid를 활용하면 부모 Grid의 기준을 자식 요소까지 이어받아 더 정돈된 레이아웃을 만들 수 있습니다.

디자인키트의 HTML 템플릿이나 웹디자인 소스를 수정할 때도 단순히 카드 개수만 맞추기보다, 카드 내부 요소가 같은 기준으로 정렬되는지 함께 확인하는 것이 좋습니다. 반복되는 UI일수록 이런 작은 정렬 차이가 전체 완성도를 좌우할 수 있습니다.