멀티 컬럼 레이아웃

멀티 컬럼 레이아웃 (Multi column layout)

멀티 컬럼 레이아웃은 IE10 이상 지원한다.

다단 레이아웃

컬럼 개수 또는 폭 설정 (기본값 auto)

• <column-count> 컬럼 개수 (단위X) : 화면의 폭을 줄였을 때 지정된 개수를 유지하려고 하기 때문에 읽기가 불편해짐

• <column-width> 컬럼 폭 (em, px) : 화면의 폭을 줄였을 때 컬럼의 개수가 폭에 맞춰서 유동적으로 변함.

• <columns> (속기형 작성법)

  • count 또는 width의 값중 하나만 입력.(반드시 그래야 하는 것은 아니고 속성에 대한 값이 겹치지 않게 하기위해 둘 중 하나만 입력한다.)

  • 작성 순서는 상관없다.

예시

columns: 12em; // column-width: 12em; column-count: auto
columns: auto 12em; // column-width: 12em; column-count: auto
columns: 2; // column-width: auto; column-count: 2
columns: 2 auto; // column-width: auto; column-count: 2
columns: auto; // column-width: auto; column-count: auto
columns: auto auto; // column-width: auto; column-count: auto
columns: 12 320px; // column-width: 320px; column-count: 12
/* ------------------ */
/* 섹션 */
.magazine-section {
  margin: 6rem 0;
  columns: 12em;
  column-gap: 1em;
  column-rule: 1px soild #fff;
}

컬럼 간격 또는 구분 선 설정

• column-gap

• column-rule (속기형)

  • column-rule-color

  • column-rule-style

  • column-rule-width

컬럼 병합

• column-span : 예를 들어 글의 제목에 해당하는 행에 제목만 남기고 싶다면 행을 병합해서 사용한다.

/* 제목 */
.magazine-headline {
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.2;
  column-span: all;
}

컬럼 채우기

• column-fill

참고

• CSS Multi-column Layout Module Level 1

• CSS 다단 레이아웃 사용

• CSS 멀티 컬럼 (실습 용도)