# 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에서 이 부분까지 지원하기를 기대해봅니다.

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHUtqhlZT9Rm-Q0bGEy%2F-LHV5q76627v31taBS--%2Fimage.png?alt=media\&token=07463644-67aa-4bf2-9e3e-ba1132111b04)
