column-count 레이아웃 나누기

See the Pen column-count by nilgi (@nilgi) on CodePen.

 

.cc {
  column-count: 3; / 3칸으로 나누기
}

.cc1 {
  column-count: 3;
  column-gap: 50px; / 칸 사이 여백 넣기
}

.cc2 {
  column-count: 3;
  column-gap: 50px;
  column-rule-style: solid; / 여백을 선으로 표시
}

.cc3 {
  column-count: 3;
  column-gap: 50px;
  column-rule-style: solid;
  column-rule-width: 1px; / 여백선 굵기
}

.cc4 {
  column-count: 3;
  column-gap: 50px;
  column-rule-style: solid;
  column-rule-width: 5px;
  column-rule-color: tomato; / 여백선 색깔
}

.cc5 {
  column-count: 3;
  column-gap: 50px;
  column-rule: 4px solid #1E90FF; / 여백선 속기
}

.m5m {
  column-span: all; / 제목은 여백에 포함시키지 않기(table의 caption같은 개념)
}
.cc6 {
  column-count: 3;
  column-gap: 50px;
  column-rule: 4px solid #1E90FF;
}

.cc7 {
  column-width: 100px; / 레이아웃 간격을 count가 아닌 px로 지정
  column-gap: 50px;
  column-rule: 4px solid #1E90FF;
}