CSS Multi-columns Layout

Multi-columns Layout란

요소 안에서 여러 개의 컬럼을 가지도록 할 수 있는 CSS 레이아웃

column-count

column-count: 3;

• 컬럼 개수 지정
• 가능한 값으로는 auto 와 <integer> (숫자값)

 

column-gap

column-gap: 10px;
column-gap: 20%;

• 컬럼간의 사이 공백
• 가능한 값으로는 normal (기본값으로 1em) , <length> (px,em,rem 등), <percentage> (%)

 

column-width

column-width: 100px;

• 하나의 컬럼이 가질 수 있는 최소 너비 지정
• 컬럼 개수를 늘어날 때 컬럼의 너비가 이 값보다 작아지려 하면 컬럼 개수가 늘어나는 것을 막는다.
• 가능한 값으로는 auto (기본값), <length> (px,em,vw등)

 

column-rule

column-rule: 1px solid blue;

• 컬럼간의 사이 공백에 그려지는 선의 스타일 지정
• 사용 값은 border와 비슷하게 width, style, color를 지정하여 사용

 

 

column-span

column-span: all;

• 이 속성이 all로 지정된 요소는 모든 열에 걸쳐 위치할 수 있다.
• 가능한 값으로는 none(기본값) 과 all이 있다. 

 

 

---

 

#column-container {
        min-width: 400px;
        border: 2px dashed skyblue;
        padding: 20px;

        column-count: 1;
        column-gap: 1%;
        column-width: 100px;
        column-rule: solid 2px skyblue;
      }

Columns (between 1 and 10): 1 columns

Gaps (between 1 and 10): 1%

Multi-columns Layout

Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium quos placeat totam modi amet odit fugiat officia ullam distinctio fuga incidunt maxime, eaque quae dolorem nostrum, dolorum facere. Reiciendis, deleniti! Excepturi asperiores esse quas quaerat dolor soluta nam, voluptatibus odio sed. Cumque debitis eum nobis, culpa, reprehenderit excepturi sequi rem accusantium ratione eaque at consequatur ipsum! Omnis iste ex expedita. Saepe accusamus soluta cupiditate. Id necessitatibus magnam voluptate, ab iste reprehenderit eos ut ullam minima aut tenetur excepturi officiis corrupti, recusandae iusto quidem obcaecati ipsa quaerat provident praesentium. Obcaecati, similique. Aperiam veniam, laudantium incidunt natus assumenda sapiente laborum nesciunt doloribus expedita necessitatibus nisi dolorum nobis repellat dignissimos, iste accusamus labore alias quod dolorem odit ullam nihil modi perspiciatis. Laboriosam, explicabo.