Grid × IE 참고노트

grid-template, gap 문법 지원

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

autoprefixer: v8.6.5

.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; }

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

출력 코드

.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;
}

grid-template 속성을 사용하면 IE 호환을 위한 gap 설정이 반영 되지만, grid-template-rows, grid-template-columns 속성을 사용하면 gap 설정이 반영되지 않으니 주의가 필요합니다.

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

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

autoprefixer: v8.6.5

.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; }

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

출력 코드

.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;
  }
}

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

출력 코드

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

repeat() 함수 지원

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

autoprefixer: v8.6.5

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

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

출력 코드

.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);
}

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

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