gap
flex 또는 grid 컨테이너 안에서 자식 요소 사이의 간격을 설정합니다. df와 dg에서만 동작하며, margin 기반 간격을 대체하는 현대적인 방법입니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
gap4px | gap: 4px | 최소 간격. 밀접한 아이콘, 인라인 요소 |
gap8px | gap: 8px | 좁은 간격. 버튼 그룹, 태그 목록 |
gap12px | gap: 12px | 보통 간격. 폼 필드, 리스트 아이템 |
gap16px | gap: 16px | 표준 간격. 일반적인 콘텐츠 사이 여백 |
gap2rem | gap: 2rem (20px) | rem 시작. 카드 목록, 섹션 내부 |
gap2-4rem | gap: 2.4rem (24px) | 넉넉한 간격. 카드 그리드 |
gap3-2rem | gap: 3.2rem (32px) | 넓은 간격. 섹션 간 구분 |
gap4rem | gap: 4rem (40px) | 큰 간격. 대형 레이아웃 |
rg8px | row-gap: 8px | 행(세로) 간격만 8px |
rg16px | row-gap: 16px | 행(세로) 간격만 16px |
rg2rem | row-gap: 2rem (20px) | 행(세로) 간격만 20px |
cg8px | column-gap: 8px | 열(가로) 간격만 8px |
cg16px | column-gap: 16px | 열(가로) 간격만 16px |
cg2rem | column-gap: 2rem (20px) | 열(가로) 간격만 20px |
시각적 비교
flex 컨테이너에서 다양한 gap 값이 요소 간 간격에 어떤 영향을 주는지 비교합니다.
4px — gap4px
8px — gap8px
12px — gap12px
16px — gap16px
20px (2rem) — gap2rem
32px (3.2rem) — gap3-2rem
gap vs margin 비교
gap은 아이템 사이에만 간격을 넣고, margin은 모든 면에 간격을 추가합니다.
gap — df gap16px
아이템 사이에만 16px 간격. 첫/마지막 아이템 바깥에는 간격 없음
margin — mr16px
마지막 아이템 뒤에도 불필요한 16px 간격이 생김
gap이 더 나은 이유
gap은 아이템 사이에만 간격을 넣어 첫/마지막 아이템의 여분 margin 문제가 없습니다. 줄바꿈 시에도 올바르게 동작합니다.
row-gap & column-gap
행(세로)과 열(가로) 간격을 각각 다르게 지정할 수 있습니다. rg는 row-gap, cg는 column-gap입니다.
<!-- Separate row-gap and column-gap -->
<div class="dg gtcr3-1fr rg2-4rem cg8px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<!-- row-gap only (no horizontal gap) -->
<div class="df fdc rg16px">
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
</div>
<!-- column-gap only (no vertical gap) -->
<div class="df cg2rem">
<div>Col 1</div>
<div>Col 2</div>
<div>Col 3</div>
</div>rg2-4rem cg8px — 행 24px, 열 8px
행 간격(세로)은 넓고, 열 간격(가로)은 좁음
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 방향 |
|---|---|---|
rg8px | row-gap: 8px | Row (vertical) gap |
rg16px | row-gap: 16px | Row (vertical) gap |
rg2rem | row-gap: 2rem | Row (vertical) gap — 20px |
rg2-4rem | row-gap: 2.4rem | Row (vertical) gap — 24px |
cg8px | column-gap: 8px | Column (horizontal) gap |
cg16px | column-gap: 16px | Column (horizontal) gap |
cg2rem | column-gap: 2rem | Column (horizontal) gap — 20px |
cg2-4rem | column-gap: 2.4rem | Column (horizontal) gap — 24px |
단위별 예시
20px 미만은 px, 20px 이상은 rem을 사용합니다. 1rem = 10px 기준입니다.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 실제 크기 |
|---|---|---|
gap4px | gap: 4px | 4px |
gap8px | gap: 8px | 8px |
gap12px | gap: 12px | 12px |
gap16px | gap: 16px | 16px |
gap2rem | gap: 2rem | 20px |
gap2-4rem | gap: 2.4rem | 24px |
gap3-2rem | gap: 3.2rem | 32px |
gap4rem | gap: 4rem | 40px |
gap4-8rem | gap: 4.8rem | 48px |
자주 사용하는 패턴
실무에서 자주 사용하는 gap 조합 패턴입니다.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">패턴 | 클래스 | 용도 |
|---|---|---|
| Card grid | dg gtcrfit-minmax28rem-1fr gap2rem | Responsive card list |
| Button group | df gap8px | Gap between buttons |
| Form fields | df fdc gap16px | Vertical form layout |
| Navigation | df aic gap2-4rem | Header menu gap |
| Tag list | df fww gap8px | Wrapping tags |
| Section gap | df fdc gap4rem | Between large content blocks |
<!-- Card grid -->
<div class="dg gtcrfit-minmax28rem-1fr gap2rem">
<div class="bg18181B p2rem br8px">Card 1</div>
<div class="bg18181B p2rem br8px">Card 2</div>
<div class="bg18181B p2rem br8px">Card 3</div>
</div>
<!-- Button group -->
<div class="df gap8px">
<button class="bg6366F1 cFFFFFF py8px px16px br8px bn cp">Save</button>
<button class="bg27272A cFFFFFF py8px px16px br8px bn cp">Cancel</button>
</div>
<!-- Form fields -->
<form class="df fdc gap16px">
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<textarea placeholder="Message"></textarea>
<button class="bg6366F1 cFFFFFF py8px px16px br8px bn cp">Submit</button>
</form>
<!-- Tag list (wrapping allowed) -->
<div class="df fww gap8px">
<span class="bg27272A cFAFAFA py4px px12px br4px fs14px">HTML</span>
<span class="bg27272A cFAFAFA py4px px12px br4px fs14px">CSS</span>
<span class="bg27272A cFAFAFA py4px px12px br4px fs14px">JavaScript</span>
<span class="bg27272A cFAFAFA py4px px12px br4px fs14px">Vue</span>
<span class="bg27272A cFAFAFA py4px px12px br4px fs14px">Nuxt</span>
</div>팁 & 주의사항
gap은 flex/grid 전용
gap은 df(display: flex) 또는 dg(display: grid) 컨테이너에서만 동작합니다. block이나 inline 요소에는 적용되지 않습니다.
margin 대신 gap 사용
아이템 사이 간격에는 gap이 margin보다 깔끔합니다. 첫/마지막 아이템의 여분 margin 문제가 없고, 줄바꿈 시에도 올바르게 동작합니다.
4의 배수 사용
간격 값은 4의 배수를 사용하세요: 4px, 8px, 12px, 16px, 2rem(20px), 2-4rem(24px) 등. 일관된 간격 시스템이 디자인 품질을 높입니다.
row-gap/column-gap으로 세밀한 제어
행과 열의 간격을 다르게 하려면 rg(row-gap)와 cg(column-gap)를 개별적으로 지정하세요. gap은 두 값을 동일하게 적용합니다.
Shorthand 분해: gap은 내부적으로 row-gap + column-gap으로 분해됩니다. gap2rem cg1rem 사용 시 column-gap만 1rem으로 정확히 덮어씁니다. 2값 사용 시에도 분해됩니다: gap2rem-4rem → row-gap: 2rem; column-gap: 4rem으로 분해되어, 방향별 클래스로 정확히 덮어쓸 수 있습니다.