한 줄 요약 - 그리드 칸과 칸 사이 빈 공간에 선을 직접 긋는 CSS. 선이 생겨도 칸은 전혀 밀리지 않아요.
이럴 때 필요해요
카드나 타일을 격자로 늘어놓고 '칸 사이에 얇은 구분선'을 넣고 싶을 때가 많습니다. 지금까지는 각 칸에 border를 주거나(겹친 선이 두꺼워지고 끝 칸 처리가 지저분함), 빈 가짜 요소를 끼워 넣거나, 배경에 줄무늬를 깔아 흉내 냈습니다. 전부 칸의 크기나 간격을 건드려서 정렬이 미세하게 어긋나기 쉬웠죠. Gap Decorations는 이 선을 칸이 아니라 칸 사이 여백(gap)에 직접 그려서 그 고민을 없애줍니다.
어떻게 동작하나
그리드(display:grid)에 gap을 줘서 칸 사이에 여백을 만들면, 그 여백이 선이 그려질 자리가 됩니다.
column-rule(열과 열 사이 세로선) / row-rule(행과 행 사이 가로선)을 선언하면 그 여백 한가운데에만 선이 그려집니다. border와 달리 칸 크기를 늘리지 않아서 어떤 칸도 밀려나지 않아요.
rule-inset을 주면 선을 양 끝에서 안쪽으로 들여 짧은 구분선으로 그릴 수 있습니다. 두께/스타일(실선,파선,점선)/색은 글자색처럼 자유롭게 바꿉니다.
핵심은 이거예요
선은 칸이 아니라 칸 사이 여백에 그려집니다. 그래서 구분선을 켜든 끄든 레이아웃은 1px도 변하지 않아요. 이것만 기억하면 border로 줄 긋던 습관에서 벗어날 수 있습니다.
놓치기 쉬운 것
아직 새 기능이라 Chrome 149(2026-06) 이상에서만 보입니다. @supports로 감지해서 미지원 브라우저엔 안내를 띄우고, 그리드 자체는 정상 동작하도록 폴백을 둬야 안전합니다.
gap이 0이면 선이 그려질 자리가 없습니다. 구분선을 쓰려면 gap을 먼저 줘야 해요.
column-rule은 세로선(열 사이), row-rule은 가로선(행 사이)입니다. 이름과 방향이 헷갈리기 쉬우니 주의하세요.
이런 곳에 써요
설정 화면이나 대시보드의 타일 격자에서 칸 사이를 깔끔하게 나눌 때
가격표/기능 비교표처럼 셀 사이에 얇은 격자선이 필요한 표 형태 레이아웃
이 데모 코드를 참고할 때 유의하세요
Gap Decorations는 아직 최신 브라우저에서만 동작하는 신기능이라, 이 데모는 미지원 브라우저에서도 효과가 보이도록 폴백(대체 동작)을 함께 넣어 두었습니다. 미지원으로 감지되면 자바스크립트(ResizeObserver)로 타일 위치를 재서 칸 사이에 선을 직접 그려 줍니다. 그래서 아래 자동 추출된 소스에는 순수 CSS 선언 외에 좌표를 측정해 선 오버레이를 그리는 코드가 섞여 있어요. 실제 프로젝트에서 이 기능만 쓸 때는 그리드에 column-rule / row-rule / rule-inset를 선언하는 것만으로 충분합니다. 데모 코드 전체를 그대로 옮기기보다, 이 CSS 선언 부분만 참고하시고 폴백은 지원 브라우저가 충분히 퍼지기 전까지의 임시 장치로 봐 주세요.