# 멀티 컬럼(Multi-Column) 레이아웃
CSS 멀티 컬럼(Multi-Column) 레이아웃은 텍스트를 신문이나 잡지처럼 여러 개의 컬럼으로 나누어 표시할 때 사용하는 기능이야.

> 그리드(Grid)나 플렉스(Flexbox)와 달리, 주로 텍스트 콘텐츠를 정렬하는 데 최적화되어 있어!

| 속성 | 설명 | 옵션 |
|---|---|---|
| column-count | 컬럼 개수 설정 | 
| column-width | 컬럼 너비 설정 | 
| column-gap | 컬럼 간격 조정 | 
| column-rule | 컬럼 사이 구분선 | 
| column-span | 컬럼 합치기 |  none, all |
| column-fill | 컬럼 내용 배치 방식 | balance, auto |
| break-inside | 컬럼 내 줄바꿈 제어 | auto, avoid |

## 멀티 컬럼 기본 개념
멀티 컬럼 레이아웃을 사용하면 컨텐츠를 자동으로 여러 개의 열(column)로 정렬할 수 있어.
* column-count, column-width를 사용하여 컬럼을 설정!

```css
.container {
  column-count: 3;
  column-gap: 20px;
} /* 내용이 3개의 컬럼으로 정렬되고, 컬럼 사이 간격은 20px! */
```

## 주요 속성

### column-count
내용을 몇 개의 컬럼으로 나눌지 설정
```css
.container {
  column-count: 3;
} /* 텍스트가 3개의 열로 나뉘어 표시됨! */
```

### column-width
각 컬럼의 최소 너비를 설정, 자동으로 열 개수 조절
```css
.container {
  column-count: 3;
  column-width: 150px;
} /* 최소 너비 150px을 유지하면서 3개의 컬럼을 생성하려고 시도! */
```

### column-gap
각 컬럼 사이의 간격을 설정
```css
.container {
  column-count: 3;
  column-gap: 30px;
}
```

### column-rule
컬럼 사이에 구분선을 추가

```css
.container {
  column-count: 3;
  column-rule: 2px solid gray;
}
```
#### column-rule-width / column-rule-style / column-rule-color

### column-span
특정 요소가 여러 개의 컬럼을 차지하도록 설정
* none :	기본값 (컬럼 하나만 차지)
* all :	모든 컬럼을 가로질러 확장
```css
h2 {
  column-span: all;
} /* <h2> 요소가 여러 컬럼을 가로질러 확장됨! */
```

### column-fill
내용을 컬럼에 어떻게 배분할지 설정
* balance :	모든 컬럼을 균등하게 채움 (기본값)
* auto :	한 컬럼을 먼저 채우고 넘칠 경우 다음 컬럼으로 이동
```css
.container {
  column-count: 3;
  column-fill: auto;
} /* 한 컬럼이 가득 차면 다음 컬럼으로 넘어감! */
```

### break-inside
컬럼이 분할되는 부분에서 특정 요소가 잘리지 않도록 방지
* auto :	기본값 (자동 줄바꿈 허용)
* avoid :	컬럼이 나뉠 때 잘리지 않도록 방지
```css
h2 {
  break-inside: avoid;
} /* <h2>가 컬럼이 바뀌는 부분에서 분리되지 않도록 설정 */
```