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 속성 사용 시, 처리

1. Autoprefixer는 음수 값의 경우, -ms- 접두사를 붙이지 않습니다.

2. 각 그리드 아이템 요소는 고유한 영역 이름을 가져야 합니다. 고유한 이름을 사용하지 않으면 Autprefixer가 정상적으로 처리하지 못합니다.

3. Autoprefixer는 grid-template-columns, grid-template-areas 속성이 모두 정의되어 있어야 gap 속성에 -ms- 접두사를 붙입니다. 뿐만 아니라, 미디어 쿼리를 통해 gap을 상속받을 수도 없습니다.