웹사이트에서 가장 흔한 화면은 카드 세 장, 네 장이 가로로 늘어선 화면이다. 메뉴, 서비스 소개, 팀원, 블로그 썸네일까지 거의 모든 페이지에 카드 그리드가 들어간다. 그런데 자세히 보면 어딘가 어색하다. 제목이 한 줄인 카드와 두 줄인 카드가 섞여 있고, 본문 길이가 들쭉날쭉이라 버튼 위치가 카드마다 다르다. 디자이너가 시안에서 깔끔하게 정렬해 둔 화면이 실제 데이터로는 잘 맞지 않는다.
예전에는 자바스크립트로 가장 긴 카드의 높이를 측정해 다른 카드에 강제로 적용하거나, 카드 안에 빈 영역을 끼워 넣어 줄을 맞추는 방법을 썼다. CSS Subgrid는 이 문제를 한 줄로 해결한다. 부모 그리드의 줄(track)을 자식 카드 안쪽까지 그대로 이어주는 기능이라, 자바스크립트도 미디어 쿼리도 없이 카드 안 요소들의 가로 줄을 맞춰준다.
1. 진짜 어긋난 것은 '카드 안의 정렬'이다
일반 CSS Grid로 카드를 배치하면 카드와 카드 사이의 위치는 가지런해진다. 하지만 카드 안의 요소들 — 제목, 본문, 가격, 버튼 — 은 각자 자기 카드 안에서만 정렬된다. 결과적으로 첫 번째 카드의 버튼은 위쪽에, 두 번째 카드의 버튼은 한참 아래쪽에 놓인다. Subgrid는 자식 카드의 그리드를 부모 그리드의 줄에 동기화시킨다. 부모가 그어 놓은 가로 줄을 자식이 그대로 이어 받기 때문에, 카드 세 장의 제목과 본문과 버튼이 같은 가로 선 위에 놓인다.
2. 한 줄로 끝나는 Subgrid 선언법
코드는 의외로 단순하다. 부모에 display: grid로 행을 정해 두고, 자식 카드에 grid-template-rows: subgrid를 선언한 다음, 카드가 부모의 몇 줄을 차지할지 grid-row: span N으로 지정하면 끝이다.
- 부모 컨테이너: display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr auto;
- 자식 카드: display: grid; grid-template-rows: subgrid; grid-row: span 3;
- 결과: 모든 카드의 제목·본문·버튼 영역이 같은 가로 줄을 공유한다
가로(컬럼)도 같은 방식으로 동기화할 수 있다. grid-template-columns: subgrid라고 쓰면 카드 안의 가격표나 라벨이 모든 카드에서 정확히 같은 세로 줄에서 시작한다.
3. 자바스크립트로 만들던 'equal height' 코드를 버려도 된다
그동안 높이를 맞추기 위해 도입했던 방법들은 모두 부작용이 있었다. 자바스크립트로 높이를 강제하면 화면 크기가 바뀔 때마다 다시 계산해야 하고, 첫 로딩 직후 카드가 한 번 깜빡인다. Flexbox의 stretch도 카드 안 요소의 가로 줄까지는 맞춰주지 못한다. Subgrid는 CSS만으로 해결되니 렌더링 한 번에 정렬이 완성되고, 창 크기가 바뀌어도 자연스럽게 따라간다. 자바스크립트 의존도가 줄어드는 만큼 첫 화면 속도도 같이 좋아진다.
4. 모바일 반응형에서도 원리는 같다
화면이 좁아져 카드가 한 줄에 한 장씩 표시되면, 부모 그리드의 행이 카드 개수만큼 늘어나고 카드 안 Subgrid도 자연스럽게 따라간다. 미디어 쿼리에서 grid-template-columns만 1fr로 바꿔 주면 데스크톱과 모바일 모두에서 같은 정렬 규칙이 유지된다. 디바이스와 무관하게 카드 안 요소의 줄 맞춤은 항상 부모 그리드의 행을 따라가기 때문에, 별도의 모바일 전용 정렬 코드를 다시 짤 필요가 없다.
5. 지금 도입해도 되는 브라우저 지원 수준
Subgrid는 2023년 가을 크롬·엣지가 정식 지원을 시작하면서 모든 메이저 브라우저에서 쓸 수 있게 되었다. 파이어폭스는 2019년부터, 사파리는 2022년부터 지원해 왔고, 현재 글로벌 사용률은 95%를 넘는다. 구버전 브라우저를 쓰는 사용자를 위해 @supports (grid-template-rows: subgrid) 쿼리로 폴백을 두면 되지만, 폴백은 일반 그리드로 두는 정도면 충분하다. 정렬이 살짝 어긋날 뿐 화면이 깨지지는 않는다.
지금 우리 사이트의 카드들을 다시 보자
제품 목록, 팀원 소개, 블로그 썸네일, 가격표 — 사이트에 있는 카드들을 다시 들여다보면 안쪽 정렬이 어긋난 카드가 분명 보인다. 시안과 다르다고 답답해하던 그 부분이 대부분 카드 안의 들쭉날쭉이다. Subgrid는 그 답답함을 자바스크립트 한 줄 없이 풀어준다. 카드가 많고 데이터 길이가 들쭉날쭉한 사이트일수록 도입 효과가 크다.
CYAN 에이전시는 카드 그리드가 많이 들어가는 브랜드 사이트와 포트폴리오를 만들 때 Subgrid를 기본 패턴으로 쓰고 있다. 시안의 깔끔함이 실제 콘텐츠로도 그대로 유지되는 사이트, 그게 사장님의 사이트가 진짜로 살아 있는 모습이다.