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
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