column-width
멀티 컬럼 레이아웃에서 각 컬럼의 이상적인 너비를 설정합니다. 브라우저는 사용 가능한 공간에 맞춰 자동으로 컬럼 수를 결정합니다.
클래스 패턴
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">패턴 | 예시 | 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 reference auto columns -->
<div class="cw200px cg2rem">
<p>First paragraph. The browser automatically determines column count based on available space.</p>
<p>Second paragraph. If the container is wide, it splits into multiple columns.</p>
<p>Third paragraph.</p>
</div>
<!-- Using rem units -->
<div class="cw25rem cg16px">
<p>Auto-arranged with 250px reference column width.</p>
</div>팁 & 주의사항
이상적인 너비이지 최소 너비가 아님
column-width는 "이상적인" 너비를 지정합니다. 컨테이너가 좁으면 하나의 컬럼으로 줄어들고, 넓으면 여러 컬럼이 생깁니다.
column-gap과 함께 사용
컬럼 사이의 간격은 cg(column-gap) 클래스로 제어하세요.