グリッドレイアウトがIE11で崩れる

前提・実現したいこと

IE11にてcssgridを利用すること

発生している問題・エラーメッセージ

IE11にてcssgridが対応されていないため、ベンダープレフィックスを追加したところ
アイテムが全て重なってしまって表示されています。

改善すべき箇所をご指摘いただけるととても助かります

該当のソースコード

html
1<div class="container">
2   <div class="item item_header">header</div>
3   <div class="item item_nav">nav</div>
4   <div class="item item_main">main</div>
5   <div class="item item_sidebar">sidebar</div>
6   <div class="item item_footer">footer</div>
7</div>

css
1  .container{
2    display: grid;
3    display: -ms-grid;
4
5    grid-template-columns: 100px 1fr 100px;
6    grid-template-rows: auto auto auto;
7}
8
9.item_nav{
10    -ms-grid-columns: 1;
11    -ms-grid-rows: 2;
12}
13
14.item_main{
15    -ms-grid-columns: 2;
16    -ms-grid-rows: 2;
17}
18
19.item_sidebar{
20    -ms-grid-columns: 3;
21    -ms-grid-rows: 2;
22}

m.ts10806

2020/12/09 08:17

完成イメージをご提示ください。

行動規範の内容に同意します

回答1件

ベストアンサー

下記でどうでしょうか。

css
1.container {
2  display: grid;
3  display: -ms-grid;
4
5  -ms-grid-columns: 100px 1fr 100px;
6
7  grid-template-columns: 100px 1fr 100px;
8  -ms-grid-rows: auto auto auto;
9  grid-template-rows: auto auto auto;
10}
11
12.item_header {
13  -ms-grid-column: 1;
14  -ms-grid-column-span: 3;
15  grid-column: 1/4;
16  -ms-grid-row: 1;
17  grid-row: 1;
18}
19
20.item_nav {
21  -ms-grid-column: 1;
22  grid-column: 1;
23  -ms-grid-row: 2;
24  grid-row: 2;
25}
26
27.item_main {
28  -ms-grid-column: 2;
29  grid-column: 2;
30  -ms-grid-row: 2;
31  grid-row: 2;
32}
33
34.item_sidebar {
35  -ms-grid-column: 3;
36  grid-column: 3;
37  -ms-grid-row: 2;
38  grid-row: 2;
39}
40
41.item_footer {
42  -ms-grid-column: 1;
43  -ms-grid-column-span: 3;
44  grid-column: 1/4;
45  -ms-grid-row: 3;
46  grid-row: 3;
47}
48