> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/css-grid/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/css-grid/css-grid-for-ie/dev-notes.md).

# Grid × IE 참고노트

## `grid-template`, `gap` 문법 지원

2018년 현재 [Autoprefixer](https://github.com/postcss/autoprefixer/releases)는 `grid-template-areas` 속성을 지원 하므로 `grid-template` 속기형 코드를 다음과 같이 작성 하여도 IE에서 호환이 가능합니다. ([autoprefixer 7.2부터 지원 시작](https://github.com/postcss/autoprefixer/releases/tag/7.2.0))

{% code title=" autoprefixer: v8.6.5" %}

```css
.grid {
  display: grid;
  gap: 10px;
  grid-template:
    "a   b" 100px
    "c   d" 100px /
    1fr  1fr;
}

.area-A { grid-area: a; }
.area-B { grid-area: b; }
.area-C { grid-area: c; }
.area-D { grid-area: d; }
```

{% endcode %}

#### Autoprefixer를 통해 변경된 IE 호환 코드

{% code title="출력 코드" %}

```css
.grid {
 display: -ms-grid;
 display: grid;
 gap: 10px;
 -ms-grid-rows: 100px 10px 100px;
 -ms-grid-columns: 1fr 10px 1fr;
 grid-template:
   "a   b" 100px
   "c   d" 100px /
   1fr  1fr;
}

.area-A {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

.area-B {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: b;
}

.area-C {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: c;
}

.area-D {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: d;
}
```

{% endcode %}

{% hint style="warning" %}
grid-template 속성을 사용하면 IE 호환을 위한 gap 설정이 반영 되지만, **grid-template-rows, grid-template-columns 속성을 사용하면 gap 설정이 반영되지 않으니 주의가 필요합니다.**
{% endhint %}

### 미디어 쿼리 사용 시, 주의 점

미디어 쿼리를 사용할 경우 `grid-template`, `grid-template-areas` 속성의 경우 자동으로 처리합니다. 하지만 `gap` 속성의 경우 자동으로 처리 하지 못합니다. (현재 autoprefixer 8.4.5 기준)

{% code title=" autoprefixer: v8.6.5" %}

```css
.grid {
  display: grid;
  gap: 10px;
  grid-template:
    "a   b" 100px
    "c   d" 100px
    "e   f" 100px /
    1fr  1fr;
}

@media (min-width: 600px){
  /* gap 속성 설정을 미디어 쿼리 구문 안에 별도로 하지 않으면 */
  .grid {
    grid-template:
      "a   b   c" 100px
      "d   e   f" 100px /
      1fr  1fr 1fr;
  }
}

.area-A { grid-area: a; }
.area-B { grid-area: b; }
.area-C { grid-area: c; }
.area-D { grid-area: d; }
.area-E { grid-area: e; }
.area-F { grid-area: f; }
```

{% endcode %}

#### Autoprefixer를 통해 변경된 IE 호환 코드

{% code title="출력 코드" %}

```css
.grid {
  display: -ms-grid;
  display: grid;
  gap: 10px;
  -ms-grid-rows: 100px 10px 100px 10px 100px;
  -ms-grid-columns: 1fr 10px 1fr;
      grid-template:
    "a   b" 100px
    "c   d" 100px
    "e   f" 100px /
    1fr  1fr;
}

@media (min-width: 600px){
  .grid {
    /* gap 속성 값이 반영되지 않았습니다. */
    -ms-grid-rows: 100px 100px;
    -ms-grid-columns: 1fr 1fr 1fr;
        grid-template:
      "a   b   c" 100px
      "d   e   f" 100px /
      1fr  1fr 1fr;
  }
}

.area-A {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

.area-B {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: b;
}

.area-C {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: c;
}

.area-D {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: d;
}

.area-E {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: e;
}

.area-F {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
  grid-area: f;
}

@media (min-width: 600px){
  .area-A {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .area-B {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .area-C {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .area-D {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  .area-E {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  .area-F {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
  }
}
```

{% endcode %}

이 문제를 해결하려면 미디어 쿼리 구문 내에 별도로 `gap` 속성을 설정해야 합니다.

{% code title="출력 코드" %}

```css
@media (min-width: 600px){
  .grid {
    /* 별도로 gap 속성을 미디어 쿼리 구문 내부에 작성합니다. */
    gap: 10px;
    grid-template:
      "a   b   c" 100px
      "d   e   f" 100px /
      1fr  1fr 1fr;
  }
}
```

{% endcode %}

## repeat() 함수 지원

반복되는 값을 일일이 입력할 필요 없이 `repeat()` 함수를 사용하면 편리해집니다. 하지만 IE는 이 함수를 지원하지 않습니다. 다행히 Autoprefixer 가 자동으로 MS 문법으로 변환 시켜주니 큰 문제 거리는 아닙니다.

{% code title=" autoprefixer: v8.6.5" %}

```css
.container {
  display: grid;
  /* 표준 문법인 repeat() 함수를 사용 */
  grid-template-columns: repeat(6, calc(100vw / 6));
  grid-template-rows: repeat(4, 100px);
}
```

{% endcode %}

#### Autoprefixer를 통해 변경된 IE 호환 코드

{% code title="출력 코드" %}

```css
.container {
  display: -ms-grid;
  display: grid;
  /* MS 문법으로 변환 (value)[n] */
  -ms-grid-columns: (calc(100vw / 6))[6];
      grid-template-columns: repeat(6, calc(100vw / 6));
  -ms-grid-rows: (100px)[4];
      grid-template-rows: repeat(4, 100px);
}
```

{% endcode %}

## 암시적 그리드 속성은 아직...

`grid-auto-rows`, `grid-auto-columns`, `grid-auto-flow` 속성을 Autoprefixer가 지원하지 않으므로 이 속성들은 IE 호환을 위해 사용할 수 없습니다. 향후 Autoprefixer에서 이 부분까지 지원하기를 기대해봅니다.

![](/files/-LHV5q76627v31taBS--)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://yamoo9.gitbook.io/css-grid/css-grid-for-ie/dev-notes.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.