# 멀티 컬럼 레이아웃

## 멀티 컬럼 레이아웃 (Multi column layout)

{% hint style="warning" %}
멀티 컬럼 레이아웃은 [IE10 이상 지원](https://caniuse.com/multicolumn)한다. 
{% endhint %}

## 다단 레이아웃

### 컬럼 개수 또는 폭 설정 (기본값 auto)

* `<column-count>` 컬럼 개수 (단위X) : 화면의 폭을 줄였을 때 지정된 개수를 유지하려고 하기 때문에 읽기가 불편해짐
* `<column-width>` 컬럼 폭 (em, px) : 화면의 폭을 줄였을 때 컬럼의 개수가 폭에 맞춰서 유동적으로 변함.
* `<columns>` (속기형 작성법)
  * `count` 또는 `width`의 값중 하나만 입력.(반드시 그래야 하는 것은 아니고 속성에 대한 값이 겹치지 않게 하기위해 둘 중 하나만 입력한다.)
  * 작성 순서는 상관없다.

### 예시

```css
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 : 예를 들어 글의 제목에 해당하는 행에 제목만 남기고 싶다면 행을 병합해서 사용한다.

```css
/* 제목 */
.magazine-headline {
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.2;
  column-span: all;
}
```

### 컬럼 채우기

* column-fill

## 참고&#x20;

* [CSS Multi-column Layout Module Level 1](https://www.w3.org/TR/css-multicol-1/)
* [CSS 다단 레이아웃 사용](https://developer.mozilla.org/ko/docs/CSS3_Columns)
* [CSS 멀티 컬럼 (실습 용도)](https://codepen.io/hanna244/pen/eYdXQKr)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/html-and-css/css-2/undefined/undefined-9.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.