grid-template-columns の IE対応のやり方について

ある画像を横いっぱい10個並べて表示し、10個以上になったら改行して

表示させるという実装をしているのですが、

chromeではgrid-template-columns:repeat(10, 1fr);で表示することが可能なのですが、

IEで表示させると一行でスクロールしないと見れない状態になっています。

調べるとIEで」は、-ms-grid-columns:と実装すればいいと書いてありますが、できなくて困っています。

以下は、chromeで表示しているcssソースコードと実装したいイメージ画像です。どなたかご教授のほどよろしくお願いいたします。

css
1.people {
2    display: grid;
3    display: -ms-flexbox;
4    grid-template-columns: repeat(10, 1fr);
5    padding: 0 30px 70px 30px;
6}

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

回答1件

ベストアンサー

IE は、Grid Layout のサポート状況がよくありません。
Flexbox ではだめなのでしょうか？
わたしなら Grid が適切だという場合でも IE を除外してこのように書くと思います。

CSS
1.people {
2  display: flex;
3  flex-wrap: wrap;
4  justify-content: space-between;
5  padding: 0 30px 70px 30px;
6}
7
8.people > * {
9  flex-basis: 10%;
10}
11
12@supports (display: grid) {
13  .people {
14    display: grid;
15    grid-template-columns: repeat(10, 1fr);
16  }
17}