AAtomic CSS

column-gap

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

클래스 목록

클래스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

사용 예시

<!-- 열 간격만 넓게, 행 간격은 좁게 -->
<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>

<!-- flex에서 아이템 사이 가로 간격 -->
<div class="df cg16px">
  <button>버튼 1</button>
  <button>버튼 2</button>
  <button>버튼 3</button>
</div>

팁 & 주의사항

cg + rg로 비대칭 간격

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

flex 컨테이너에서도 동작

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

row-gapgapgrid