AAtomic CSS

row-gap

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

클래스 목록

클래스CSS설명
rg4pxrow-gap: 4px행 간격 4px
rg8pxrow-gap: 8px행 간격 8px
rg12pxrow-gap: 12px행 간격 12px
rg16pxrow-gap: 16px행 간격 16px
rg2remrow-gap: 2rem (20px)행 간격 20px
rg2-4remrow-gap: 2.4rem (24px)행 간격 24px
rg3-2remrow-gap: 3.2rem (32px)행 간격 32px

시각적 비교

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

row-gap: 4px — rg4px

123456

row-gap: 16px — rg16px

123456

row-gap: 3.2rem (32px) — rg3-2rem

123456

사용 예시

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

<!-- flex-wrap에서 행 간격 제어 -->
<div class="df fww rg16px cg8px">
  <span>태그 1</span>
  <span>태그 2</span>
  <span>태그 3</span>
</div>

팁 & 주의사항

rg + cg로 비대칭 간격

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

flex에서도 동작

rg는 df fww(flex-wrap) 컨테이너에서도 줄바꿈 시 행 간 간격으로 적용됩니다.

column-gapgapgrid