Multi Column Layout

column-width

너비를 지정하는 속성

column-width: 200px;

column-count

단의 개수 지정하는 속성

column-count: 4;

columns

단의 너비와 개수 일괄 지정
지정하지 않은 속성은 auto값 지정

columns: 200px 3;
columns: 200px;
columns; 3;

column-gap

단과 단 사이의 간격

column-gap: 2rem;

column-rule

단과 단 사이의 구분선

column-rule: 2px dotted black;

column-span

여러 단을 차지하는 요소 지정

display: block;
colimn-span: all;

column-fill

컨텐츠 흐름의 영향 받는 방식 지정

/* auto - 기본값, 다른 단의 크기에 따라 서로 다르게 표현, 단이 순서대로 채워짐 */
column-fill: auto; 
/* balance - 다른 단의 크기에 따라 균형있게 채워침 */
column-fill: balance;

break

단의 분할 방식 제어
auto: 단 나누기를 강제하지 않는다
avoid: 요소 앞에서 단을 분할하지 않는다
column: 요소 앞에서 항상 단을 분할한다
avoid-column: 요소 앞에서 단을 나누지 않는다.

break-before

요소 앞에서 열 분리

break-before: auto;

break-after

요소 뒤에서 열 분리

break-after: column;

break-inside

요소 내부에서 열 분리 허용하거나 방지

break-inside: avoid-column;