column-width
멀티 컬럼 레이아웃에서 각 컬럼의 이상적인 너비를 설정합니다. 브라우저는 사용 가능한 공간에 맞춰 자동으로 컬럼 수를 결정합니다.
클래스 패턴
| 패턴 | 예시 | CSS |
|---|---|---|
| cw{N}px | cw200px | column-width: 200px |
| cw{N}px | cw150px | column-width: 150px |
| cw{N}rem | cw20rem | column-width: 20rem |
| cw{N}rem | cw30rem | column-width: 30rem |
사용 예시
컬럼 너비만 지정하면 브라우저가 자동으로 컬럼 수를 계산합니다. 신문 레이아웃이나 텍스트 다단 배치에 유용합니다.
<!-- 200px 기준 자동 컬럼 -->
<div class="cw200px cg2rem">
<p>첫 번째 단락입니다. 브라우저가 공간에 맞게 자동으로 컬럼 수를 결정합니다.</p>
<p>두 번째 단락입니다. 컨테이너가 넓으면 여러 컬럼으로 나뉩니다.</p>
<p>세 번째 단락입니다.</p>
</div>
<!-- rem 단위 사용 -->
<div class="cw25rem cg16px">
<p>250px 기준 컬럼 너비로 자동 배치됩니다.</p>
</div>팁 & 주의사항
이상적인 너비이지 최소 너비가 아님
column-width는 "이상적인" 너비를 지정합니다. 컨테이너가 좁으면 하나의 컬럼으로 줄어들고, 넓으면 여러 컬럼이 생깁니다.
column-gap과 함께 사용
컬럼 사이의 간격은 cg(column-gap) 클래스로 제어하세요.