간격

간격 (Gap)

그리드(grid)나 플렉스박스(flexbox) 레이아웃에서 항목들 사이의 간격을 정해 주는 유틸리티예요. 행과 열 사이의 간격을 한꺼번에, 또는 각각 따로 조절할 수 있어요.

출처: 문서

gap-<number> gap: calc(var(--spacing) * <value>);

gap-px gap: 1px;

gap-(<custom-property>) gap: var(<custom-property>);

gap-[<value>] gap: <value>;

gap-x-<number> column-gap: calc(var(--spacing) * <value>);

gap-x-px column-gap: 1px;

gap-x-(<custom-property>) column-gap: var(<custom-property>);

gap-x-[<value>] column-gap: <value>;

gap-y-<number> row-gap: calc(var(--spacing) * <value>);

gap-y-px row-gap: 1px;

gap-y-(<custom-property>) row-gap: var(<custom-property>);

gap-y-[<value>] row-gap: <value>;

gap-2, gap-4 같은 gap-<number> 유틸리티를 사용하면 그리드와 플렉스박스 레이아웃에서 행과 열 사이의 간격을 변경할 수 있어요.

01 02 03 04

<div class="grid grid-cols-2 gap-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

gap-x-8, gap-y-4 같은 gap-x-<number> 또는 gap-y-<number> 유틸리티를 사용하면 열과 행 사이의 간격을 각각 따로 변경할 수 있어요.

01 02 03 04 05 06

<div class="grid grid-cols-3 gap-x-8 gap-y-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

gap-[<value>], gap-x-[<value>], gap-y-[<value>] 같은 유틸리티를 사용하면 완전히 커스텀한 값으로 간격을 설정할 수 있어요.

<div class="gap-[10vw] ...">
  <!-- ... -->
</div>

CSS 변수를 쓸 때는 gap-(<custom-property>) 문법을 사용할 수도 있어요.

<div class="gap-(--my-gap) ...">
  <!-- ... -->
</div>

이것은 gap-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

gap, column-gap, row-gap 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.

<div class="grid gap-4 md:gap-6 ...">
  <!-- ... -->
</div>

variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.