[html][css] IE에서 grid 옵션 적용이 안될 때

웹 외주 프로젝트를 진행하다가 난관에 봉착했습니다..

(웹은 처음이라,,,)

 

chrome으로는 잘 적용되던 것들이 IE에서는 호환이 안되는 것!

 

아무리 2022년 6월에 IE 서비스를 종료한다고 해도

이 부분은 고객사와의 약속이니만큼 최선을 다해 호환성을 맞추려 끙끙 댔습니다.

 

분명 다른 분들도 저와 비슷항 상황을 겪고 있을거라 생각하여

참고해보시라 적어봅니다!!!

 

 

이 사이트는 chrome에서 잘 돌아가는 css를 IE에서도 호환이 되게 자동으로 변경해주는 사이트입니다!

https://autoprefixer.github.io

Autoprefixer CSS online

일단 원래 제가 쓰려고 하던 html 구조가

 

ul > li 이렇게 되어있고

<ul>이 grid의 바깥 테두리 부분이고, <li>가 grid 안쪽의 한 아이템, 아이템 요렇게 구성되어 있습니다!

 

<ul>에는 기존 css를 상단 Autoprefixer CSS online 사이트에 돌려서 수정된

 .test-grid ul{
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(21%, auto));
    -ms-grid-columns: 100px 100px 100px 100px;
    justify-items: start;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    -webkit-padding-start: 0px;
            padding-inline-start: 0px;
    margin-bottom: 0;
} 

를 적용해 주었고 ,

 

row-gap같은 속성들이 IE에서는 안먹어서 <li>에 직접 마진을 설정해주어야 합니다!!!!!!!!!!!!!

 

 

그리고 중요한점,,!

.test-grid ul > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}
.test-grid ul > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}
.test-grid ul > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}
.test-grid ul > *:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 4;
}
...

 

이렇게 ul에

1번째 아이템의 위치는 1행 1열,

2번째 아이템의 위치는 1행 2열,

3번째 아이템의 위치는 1행 3열, 

4번째 아이템의 위치는 1행 4열

...

아이템의 행과 열을 지정해주어야 합니다!

(이 부분을 안해주게 되면 모든 아이템들이 1행 1열에 모입니다!!)

 

이렇게만 하면 grid가 잘 적용되는 것을 볼 수 있습니다!

 

 

(+ 참고로 fit-content가 IE에서는 지원이 안됩니다!

height: fit-content; 

를 쓰고싶다면?

height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;  

요렇게 세줄 다 써주면 됩니다!)

 

 

(참고 사이트 : https://www.codingfactory.net/12419 작성자님 감사합니다ㅠㅠ!)