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



css grid의 구현 상황

일반 구현

<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. 이오/