CSS Grid 호환성 테이블
IE × CSS Grid 속성 호환성 테이블
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 | span 문법에서 grid-row-end 속성 필요 | 1 |
grid-column-start | -ms-grid-column | OK | span 문법에서 grid-column-end 속성 필요 | 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 | Autoprefixer row/column 좌표로 변경 처리 | 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 | 현재 지원되지 않는 이유는 GitHub 이슈를 참고 | |
NA | -ms-grid-row-span | OK | grid-row-end, grid-area 속성 사용 시 처리 | |
NA | -ms-grid-column-span | OK | grid-column-end, grid-area 속성 사용 시, 처리 |
Autoprefixer는 음수 값의 경우, -ms- 접두사를 붙이지 않습니다.
각 그리드 아이템 요소는 고유한 영역 이름을 가져야 합니다. 고유한 이름을 사용하지 않으면 Autprefixer가 정상적으로 처리하지 못합니다.
Autoprefixer는 grid-template-columns, grid-template-areas 속성이 모두 정의되어 있어야 gap 속성에 -ms- 접두사를 붙입니다. 뿐만 아니라, 미디어 쿼리를 통해 gap을 상속받을 수도 없습니다.
Last updated