📏

CSS Gap Decorations

row-rule/column-rule로 간격에 선 그리기

그리드나 플렉스박스 레이아웃에서 아이템 사이의 간격(gap) 영역에 시각적 구분선을 넣고 싶을 때, 기존에는 border나 pseudo-element로 우회해야 했습니다. Gap Decorations 사양은 row-rule과 column-rule 속성을 통해 이 문제를 네이티브로 해결합니다.

Chrome 139 이상에서 실험 플래그를 활성화하면 사용할 수 있으며, 테이블 없이도 깔끔한 구분선 레이아웃을 구현할 수 있습니다.

column-rule: Grid에서 세로 구분선

기존 multi-column에서만 쓸 수 있었던 column-rule을 이제 Flexbox, Grid에서도 사용할 수 있습니다.

.my-grid-container {
  display: grid;
  gap: 2px;
  column-rule: 2px solid pink;
}

row-rule + column-rule: 동시 적용

row-rule로 행(가로) 간 separator를, column-rule로 열(세로) 간 separator를 각각 다른 스타일로 지정할 수 있습니다.

.my-flex-container {
  display: flex;
  gap: 10px;
  row-rule: 10px dotted limegreen;
  column-rule: 5px dashed coral;
}

repeat()로 다양한 스타일 반복/조합

콤마로 구분하여 여러 스타일을 조합하고, repeat()로 패턴을 반복할 수 있습니다. repeat(auto, ...)로 남은 gap을 자동으로 채울 수도 있습니다.

.my-container {
  display: grid;
  gap: 2px;
  row-rule:
    repeat(2, 1px dashed red),
    2px solid black,
    repeat(auto, 1px dotted green);
}

정밀 제어 속성

속성	설명
row-rule-break	행 구분선의 교차점 처리
column-rule-break	열 구분선의 교차점 처리
row-rule-outset	행 구분선의 시작/끝 위치 오프셋
column-rule-outset	열 구분선의 시작/끝 위치 오프셋
gap-rule-paint-order	행/열 구분선의 겹침 순서 (row-over-column 또는 column-over-row)

실전 적용 예시: 페이지 레이아웃

body를 Grid로 지정하고 header/nav/main/footer를 gap으로 구분한 뒤, row-rule로 각기 다른 스타일의 구분선을 적용할 수 있습니다.

▸
Nav 메뉴 — Flexbox + column-rule로 항목 사이에 세로 구분선
▸
Main 영역 — Flexbox로 이미지·텍스트를 masonry 형태로 배치, row-rule + column-rule로 격자 구조 강조
▸
정밀 조정 — column-rule-outset: 0;으로 선의 시작/끝 위치 조절

브라우저 지원 (2026년 기준)

Chrome/Edge 139+ 에서 플래그 활성화 필요: about://flags → Experimental Web Platform Features. 정식 표준화 진행 중이며 Grid, Flexbox, Multi-column, Masonry까지 모든 주요 레이아웃에서 지원 예정입니다.