멀티 컬럼 레이아웃

멀티 컬럼 레이아웃 (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

참고

Previousposition 복습겸 다시 정리Next플렉시블 레이아웃

Last updated