레이아웃
columns
엘리먼트 내부의 컬럼 수를 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
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>; |
예제
숫자로 설정하기
columns-<number> 유틸리티를 사용해 요소 내 콘텐츠에 적용할 컬럼 수를 지정할 수 있습니다. 예를 들어 columns-3은 3개의 컬럼을 생성합니다.
<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>컬럼 너비는 지정된 컬럼 수에 맞게 자동으로 조정됩니다.
너비 설정하기
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>컬럼 너비를 설정할 때, 컬럼이 너무 좁아지지 않도록 컬럼 수가 자동으로 조정됩니다.
컬럼 간격 설정
컬럼 사이의 간격을 지정하려면 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>간격 유틸리티에 대해 더 알아보려면 간격 문서를 참고하세요.
커스텀 값 사용하기
columns-[<value>] 구문을 사용하세요 columns를 완전히 커스텀한 값으로 설정하려면:
<div class="columns-[30vw] ..."> <!-- ... --></div>CSS 변수를 사용하려면 columns-(<custom-property>) 구문을 사용할 수도 있습니다:
<div class="columns-(--my-columns) ..."> <!-- ... --></div>이는 columns-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a columns 유틸리티 를 sm:와 같은 브레이크포인트 변형과 함께 사용하면 small 화면 크기 이상에서만 유틸리티가 적용됩니다:
예제의 크기를 조정하여 예상된 동작을 확인하세요
<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>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
테마 커스터마이징
--container-* 테마 변수를 사용해 프로젝트에서 fixed-width column 유틸리티를 커스터마이징할 수 있습니다:
@theme { --container-4xs: 14rem; }이제 columns-4xs 유틸리티를 마크업에서 사용할 수 있습니다:
<div class="columns-4xs"> <!-- ... --></div>테마 커스터마이징에 대해 더 알아보려면 테마 문서를 참고하세요.
