【CSS】 Grid Layout의 IE11 대응 정리

CSS Grid Layout 레이아웃에 편리한 CSS입니다만, IE용의 구현이 버릇이 있습니다.
그래서 IE에 사용한 소스를 정리해 보고 싶습니다.
덧붙여서 IE에서도 IE11에만 대응하고 있기 때문에 IE10 이하는 사용할 수 없습니다.

일반 구현

<div class="wrap">
    <header>ヘッダー</header>
    <div class="contents">コンテンツ</div>
    <div class="sidebar">サイドバー</div>
    <footer>フッター</footer>
</div>

.wrap {
  display: grid;
  grid-template-rows: 45px 1fr 45px;
  grid-template-columns: 1fr 25px;
}
header {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}
.contents {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}
.sidebar {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
footer {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
}

위의 소스에서 이러한 레이아웃을 만들 수 있습니다.

그러나 IE는 이것으로 표시하지 않습니다.

IE 구현

.wrap {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 45px 1fr 45px;
  grid-template-rows: 45px 1fr 45px;
  -ms-grid-template-columns: 1fr 25px;
  grid-template-columns: 1fr 25px;
}
header {
  -ms-grid-row: 1;
  grid-row: 1 / 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
}
.contents {
  -ms-grid-row: 2;
  grid-row: 2 / 3;
  -ms-grid-column: 1;
  grid-column: 1 / 2;
}
.sidebar {
  -ms-grid-row: 2;
  grid-row: 2 / 3;
  -ms-grid-column: 2;
  grid-column: 2 / 3;
}
footer {
  -ms-grid-row: 3;
  grid-row: 3 / 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
}

매우 까다 롭습니다.
최근 Autoprefixer가 진화한 것 같기 때문에 이 근처의 기술도 편해져 온 것 같습니다.
htps : // 어쩌면 p레후 r. 기주 b. 이오/

Reference

이 문제에 관하여(【CSS】 Grid Layout의 IE11 대응 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hiroyukiwk/items/a678dee388dfcb703d09

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다