AAtomic CSS

column-fill

멀티 컬럼 레이아웃에서 콘텐츠가 컬럼을 채우는 방식을 제어합니다. cfb(balance)는 콘텐츠를 균등하게 분배하고, cfa(auto)는 순서대로 채웁니다.

클래스 목록

클래스CSS설명
cfbcolumn-fill: balance콘텐츠를 컬럼 간 균등하게 분배 (기본값)
cfacolumn-fill: auto컬럼을 순서대로 채움. 마지막 컬럼이 비어있을 수 있음

시각적 비교

balance와 auto의 차이를 비교합니다.

balance (기본값) — cfb

컬럼 높이가 최대한 균등하게 분배됩니다. 콘텐츠가 적은 컬럼도 비슷한 높이를 가집니다.

auto — cfa

첫 번째 컬럼부터 순서대로 채웁니다. 마지막 컬럼만 비어있을 수 있습니다.

사용 예시

<!-- 균등 분배 (기본값) -->
<div class="cw200px cfb cg2rem">
  <p>콘텐츠가 컬럼 간 균등하게 분배됩니다.</p>
  <p>각 컬럼의 높이가 비슷하게 유지됩니다.</p>
</div>

<!-- 순서대로 채우기 -->
<div class="cw200px cfa h30rem cg2rem">
  <p>첫 번째 컬럼부터 순서대로 채웁니다.</p>
  <p>높이가 고정되어야 auto의 효과가 나타납니다.</p>
</div>

팁 & 주의사항

balance는 높이가 고정될 때만 차이가 남

컨테이너 높이가 auto이면 balance가 기본 동작이므로 cfa와 차이가 없을 수 있습니다. 높이를 고정한 경우에 차이가 뚜렷합니다.

column-widthcolumn-rule-widthcolumn-span