# CSS Grid 호환성 테이블

## IE × CSS Grid 속성 호환성 테이블 <a href="#ie-css-grid-compatibility" id="ie-css-grid-compatibility"></a>

Autoprefixer 도구가 상당 부분 자동으로 호환 가능한 코드로 변경해주지만, 현 시점에서 만능은 아닙니다. **프로젝트에 IE를 반영한다면 다음 표를 참고해 사용 가능한 속성과 그렇지 않은 속성을 구분해야 합니다.**

| **CSS Grid 속성**       | **IE 문법**             | **지**  | **설명**                                                                                                    | **참고** |
| --------------------- | --------------------- | ------ | --------------------------------------------------------------------------------------------------------- | ------ |
| grid-template-rows    | -ms-grid-rows         | **OK** |                                                                                                           |        |
| grid-template-columns | -ms-grid-columns      | **OK** |                                                                                                           |        |
| grid-template-areas   | NA                    | **OK** |                                                                                                           |        |
| grid-template         | NA                    | **OK** | grid-template 속기형 속성                                                                                      |        |
| grid-row-start        | -ms-grid-row          | **OK** | <p>span 문법에서 <br>grid-row-end 속성 필요</p>                                                                   | **1**  |
| grid-column-start     | -ms-grid-column       | **OK** | <p>span 문법에서 <br>grid-column-end 속성 필요</p>                                                                | **1**  |
| grid-row-end          | NA                    | **OK** | grid-row-start 속성 정의 필요                                                                                   | **1**  |
| grid-column-end       | NA                    | **OK** | grid-column-start 속성 정의 필요                                                                                | **1**  |
| grid-row              | NA                    | **OK** |                                                                                                           | **1**  |
| grid-column           | NA                    | **OK** |                                                                                                           | **1**  |
| grid-area             | NA                    | **OK** | <p>Autoprefixer <br>row/column 좌표로 <br>변경 처리</p>                                                          | **2**  |
| grid-row-gap          | NA                    | **OK** | IE에서 여분의 행/열을 생성                                                                                          | **3**  |
| grid-column-gap       | NA                    | **OK** | IE에서 여분의 행/열을 생                                                                                           | **3**  |
| gap (과거 grid-gap)     | NA                    | **OK** | IE에서 여분의 행/열을 생성                                                                                          | **3**  |
| align-self            | -ms-grid-row-align    | **OK** |                                                                                                           |        |
| justify-self          | -ms-grid-column-align | **OK** |                                                                                                           |        |
| grid-auto-rows        | NA                    | NO     | IE는 auto-placement를 미지원                                                                                   |        |
| grid-auto-columns     | NA                    | NO     | IE는 auto-placement를 미지원                                                                                   |        |
| grid-auto-flow        | NA                    | NO     | IE는 auto-placement를 미지원                                                                                   |        |
| grid                  | NA                    | NO     | <p>현재 지원되지 않는 이유는 <br><a href="https://github.com/postcss/autoprefixer/issues/1023">GitHub 이슈</a>를 참고</p> |        |
| NA                    | -ms-grid-row-span     | **OK** | <p>grid-row-end, grid-area 속성 <br>사용 시 처리</p>                                                             |        |
| NA                    | -ms-grid-column-span  | **OK** | <p>grid-column-end, grid-area <br>속성 사용 시, 처리</p>                                                         |        |

{% hint style="info" %}

1. Autoprefixer는 **음수 값의 경우, -ms- 접두사를 붙이지 않습니다.**<br>
2. 각 그리드 아이템 요소는 **고유한 영역 이름을 가져야 합니다.**\
   고유한 이름을 사용하지 않으면 Autprefixer가 정상적으로 처리하지 못합니다.<br>
3. Autoprefixer는 **grid-template-columns, grid-template-areas 속성이** \
   **모두 정의되어 있어야 gap 속성에 -ms- 접두사를 붙입니다.** 뿐만 아니라, \
   **미디어 쿼리를 통해 gap을 상속받을 수도 없습니다.**
   {% endhint %}