columns

columns (다단 컬럼)

요소의 콘텐츠를 여러 컬럼으로 나눌 때 컬럼 수나 컬럼 너비를 설정하는 유틸리티예요. 옆에서 함께 짚어 드릴게요.

출처: 문서

본문

ClassStyles

클래스 스타일
columns-<number> columns: <number>;
columns-3xs columns: var(--container-3xs); /* 16rem (256px) */
columns-2xs columns: var(--container-2xs); /* 18rem (288px) */
columns-xs columns: var(--container-xs); /* 20rem (320px) */
columns-sm columns: var(--container-sm); /* 24rem (384px) */
columns-md columns: var(--container-md); /* 28rem (448px) */
columns-lg columns: var(--container-lg); /* 32rem (512px) */
columns-xl columns: var(--container-xl); /* 36rem (576px) */
columns-2xl columns: var(--container-2xl); /* 42rem (672px) */
columns-3xl columns: var(--container-3xl); /* 48rem (768px) */
columns-4xl columns: var(--container-4xl); /* 56rem (896px) */
columns-5xl columns: var(--container-5xl); /* 64rem (1024px) */
columns-6xl columns: var(--container-6xl); /* 72rem (1152px) */
columns-7xl columns: var(--container-7xl); /* 80rem (1280px) */
columns-auto columns: auto;
columns-(<custom-property>) columns: var(<custom-property>);
columns-[<value>] columns: <value>;

Examples

Setting by number

columns-3 같은 columns-<number> 유틸리티를 사용해서 요소 안의 콘텐츠에 만들어질 컬럼의 수를 설정할 수 있어요.

<div class="columns-3 ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
  <!-- ... -->
</div>

컬럼 너비는 지정한 컬럼 수에 맞춰 자동으로 조정돼요.

Setting by width

columns-xs 나 columns-sm 같은 유틸리티를 사용해서 요소 안의 콘텐츠에 대한 이상적인 컬럼 너비를 설정할 수 있어요.

예시를 리사이즈해서 기대되는 동작을 확인해 보세요.

<div class="columns-3xs ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
  <!-- ... -->
</div>

컬럼 너비를 설정하면, 컬럼이 너무 좁아지지 않도록 컬럼 수가 자동으로 조정돼요.

Setting the column gap

gap-<width> 유틸리티를 사용해서 컬럼 사이의 간격을 지정할 수 있어요.

<div class="columns-3 gap-8 ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
  <!-- ... -->
</div>

gap 유틸리티에 대해 더 자세히 알고 싶다면 gap 문서를 참고해 주세요.

Using a custom value

columns-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 컬럼을 설정할 수 있어요.

<div class="columns-[30vw] ...">
  <!-- ... -->
</div>

CSS 변수라면 columns-(<custom-property>) 문법을 사용할 수도 있어요.

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

이는 columns-[var(<custom-property>)] 의 축약형으로, var() 함수를 자동으로 추가해 주는 문법이에요.

Responsive design

columns 유틸리티 앞에 sm: 같은 브레이크포인트 변형을 붙이면, 작은 크기(sm) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

예시를 리사이즈해서 기대되는 동작을 확인해 보세요.

<div class="columns-2 gap-4 sm:columns-3 sm:gap-8 ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.

Customizing your theme

--container-* 테마 변수를 사용해서 프로젝트의 고정 너비 컬럼 유틸리티를 커스터마이즈할 수 있어요.

@theme {
  --container-4xs: 14rem;
}

이제 마크업에서 columns-4xs 유틸리티를 사용할 수 있어요.

<div class="columns-4xs">
  <!-- ... -->
</div>

테마를 커스터마이즈하는 방법에 대해 더 자세히 알고 싶다면 theme 문서를 참고해 주세요.

더 알아보기 (Learn more)