CSS
CSS Multi-columns Layout
Neda
2022. 8. 8. 02:52
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;
}
1 columns
1%