AAtomic CSS

column-gap

그리드 또는 플렉스 컨테이너에서 열(가로) 방향의 간격만 설정합니다. gap은 행과 열 모두 같은 값을 적용하지만, cg를 사용하면 열 간격만 개별 제어할 수 있습니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
cg4pxcolumn-gap: 4px열 간격 4px
cg8pxcolumn-gap: 8px열 간격 8px
cg12pxcolumn-gap: 12px열 간격 12px
cg16pxcolumn-gap: 16px열 간격 16px
cg2remcolumn-gap: 2rem (20px)열 간격 20px
cg2-4remcolumn-gap: 2.4rem (24px)열 간격 24px
cg3-2remcolumn-gap: 3.2rem (32px)열 간격 32px

시각적 비교

열 간격만 변경하면서 행 간격은 동일하게 유지합니다.

column-gap: 4px — cg4px

123456

column-gap: 16px — cg16px

123456

column-gap: 3.2rem (32px) — cg3-2rem

123456

사용 예시

<!-- Wide column gap, narrow row gap -->
<div class="dg gtcr3-1fr cg2-4rem rg8px">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

<!-- Horizontal gap between flex items -->
<div class="df cg16px">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

팁 & 주의사항

cg + rg로 비대칭 간격

cg와 rg를 함께 사용하면 열과 행 간격을 각각 다르게 설정할 수 있습니다. 예: cg2-4rem rg8px

flex 컨테이너에서도 동작

cg는 df(display: flex) 컨테이너에서 아이템 사이의 가로 간격으로 적용됩니다.

row-gapgapgrid