multi-column layout : columns

multi-column layout

1. columns

column-width와 column-count의 단축 속성이다. 다른 단축속성들과 마찬가지로, 생략된 값은 초기값으로 설정된다.

2. column-width

length 혹은 auto로 정의할 수 있다. 실제 너비는 가능한 공간에 맞추기 위하여 넓어지거나, 좁아질 것이다.

3. column-count

정의한 수만큼 요소의 컨텐츠 안의 컬럼의 갯수를 지정한다. 해당 값이 없거나, column-width가 auto가 아닌 경우, 컬럼의 갯수는 허용 가능한 최대 수가 된다.

4. column-gap

column들의 사이 값으로 브라우저의 기본 간격 값이 사용된다. 멀티 컬럼 레이아웃에서 해당 값은 1em으로 정의된다.
%값은 부모 요소의 너비를 기준으로 한다.

5. column-span

all로 설정됐을 때, 모든 컬럼에 걸쳐 엘리먼트가 넓혀지도록 한다. 넓혀진 해당 요소를 spanning element 라고 한다.

6. column-fill

컬럼들이 끊어질 경우, 요소의 컨텐츠를 어떻게 밸런싱할 것이냐를 결정한다.

1) auto

컬럼들이 순차적으로 채워지며, 내용은 필요로 하는 만큼만 차지한다.

2) balance

내용이 컬럼들 사이에 균등하게 나누어진다. 페이지 미디어에서 마지막 페이지만 균형이 잡힌다.

3) balance-all

내용이 컬럼들 사이에 균등하게 나누어진다. 페이지 미디어에서 모든 페이지가 균형이 잡힌다.

7. column-rule

멀티 컬럼 레이아웃에서 컬럼들 사이에 rule(line)을 그릴 때 사용한다.
border와 마찬가지로 라인의 너비, 스타일과 color를 지정할 수 있다.
column-rule-width, column-rule-style, column-rule-color의 단축 속성이다.

​