Grid レイアウトのIE対応

Question

前提・実現したいこと

gridを使ったタイルレイアウトを実現したいのですが、IEでみると重なってしまいます。
いろいろ調べてためしましたが、一向に重なり解決法が見つけられず御助力を願いたく投稿しました。

・選択肢(li)タグは決まった数ではなく、ページ別に適宜増えていきます。

HTML

<ul class="selection">
  <li class="selection__item">
    <input id="choices01" type="radio" name="xxx" value="contentcode">
    <label for="choices01" class="selection__thumb">
      <span class="selection__thumbInner">
        <img src="//placehold.jp/160x90.png" alt="item1" class="selection__image">
      </span>
    </label>
    <span class="selection__text">choices01</span>
  </li>
  ...略...
</ul>

試したCSS

・選択肢(li)タグは決まった数ではなく、ページ別に適宜増えていきます。
というのが前提なので、親要素（display: grid)をかけるものだけに注力しています。
いろいろ試しましたが、以下にパターンが別ブラウザでは一番近い動きだったため載せます。

.selection {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.selection {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(150px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

IEでの見え方

他ブラウザではちゃんと表示される

###　以下、参考にしたサイトの一部になります
https://coliss.com/articles/build-websites/operation/css/how-to-css-grid-for-ie11.html
https://qiita.com/kura07/items/486c19045aab8090d6d9
https://teratail.com/questions/183925　（解決策に見えましたが、選択肢の増減を考えると現実的でないと判断しました）
https://goodsan.jp/wp/gridtile/
https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/
https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/
https://webdesign-trends.net/entry/11237

Answer 1

Gridは、IEだといろいろ工夫しないと正しく解釈されません。

下記ページを参照ください。

IEでも大丈夫！CSS Gridを使用する時の注意点と実装方法 | コリス

Comments

[crigw]

ありがとうございます。
すでにこちらのページも参考してながらIE対応を行っているつもりでして、しかしながら正常に表示されないためこちらに投稿しました。すみません。

[miyabi_pudding]

試したことは全部記載してください・・・。
参考にした記事もです。
でないと、回答の無駄打ちなどが出て、お互い嫌な気持ちになるので。

[crigw]

大変失礼いたしました。参考にしたものなど追記いたしました。