IE11へグリッドを対応させたい

IE11にグリッドを対応させようとしています。
色々見ながら、以下のようにCSSを設定し、現在、縦に4つ「card」要素が並んでいます。これを横に4つ並べたいのですが、どこか確認する箇所などありましたら教えて頂けますか。


〇CSS
.d-grid {
display: grid;
display: -ms-grid;
}

.w3l-category-main .categories-sec {
padding: 80px 0;
}

.w3l-category-main .grid-sec {
-ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 20px;
}

.w3l-category-main .card:nth-child(1) {
margin-top: 2em;
-ms-grid-row: 1;
-ms-grid-column: 1;
}

.w3l-category-main .card:nth-child(2) {
margin-top: 100px;
-ms-grid-row: 1;
-ms-grid-column: 3;
}

.w3l-category-main .card:nth-child(3) {
margin-top: 2em;
-ms-grid-row: 1;
-ms-grid-column: 5;
}

.w3l-category-main .card:nth-child(4) {
margin-top: 2em;
-ms-grid-row: 1;
-ms-grid-column: 7;
}

〇HTML
<section class="w3l-category-main">
<div class="categories-sec">
<div class="wrapper" id="info">
<div class="right-models text-center">
<div class="d-grid grid-sec">
<a href="A.html">
<div class="card">
<div class="card-body">
<p class="para-design">A</p>
</div>
</div>
</a>
<a href="B.html">
<div class="card">
<div class="card-body">
<p class="para-design">B</p>
</div>
</div>
</a>
<a href="C.html">
<div class="card">
<div class="card-body">
<p class="para-design">C</p>
</div>
</div>
</a>
<a href="D.html">
<div class="card">
<div class="card-body">
<p class="para-design">D</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>

No.2 ベストアンサー 回答者： Ogre7077 回答日時： 2021/07/26 14:51

おそらく原因は

* コンテナー .grid-sec の直接の子要素に .card が無い
* IEでは、直接の子要素に <a> が使用できない
の二点かと思います。

<a> をさらに囲む <div class=item> を追加しては如何でしょうか?

例)
.grid-sec { display: -ms-grid; -ms-grid-columns: 1fr ...
.grid-sec > .item:nth-child(1) { -ms-grid-column: 1; ...

<div class=grid-sec>
_ <div class=item><a><div class=card> ...
</div>

この回答へのお礼

ありがとうございます！

＞* コンテナー .grid-sec の直接の子要素に .card が無い
＞* IEでは、直接の子要素に <a> が使用できない
を拝見し、<a></a>ここにいらないかもと思い、<a href="A.html"></a>(D.htmlまで同様)削除したら横にあっさり4つ並びました！

教えて頂きありがとうございます。

お礼日時：2021/07/27 12:56

No.1 回答者： fujillin 回答日時： 2021/07/26 14:27

こんにちは

IE11だとgridやgrid-template-columnsには部分対応しかしていないようですね。（プレフィックスが必要。）
特にcolumnsに関しては列数に対応してくれていないようです。
https://caniuse.com/css-grid

代替で良ければ、いろいろ考えられるとは思いますが、例えばflexレイアウトにして、
.d-grid {
display: flex;
}
.d-grid>a {
display:block;
width: 25%;
}
などとすれば、横並びにはできますけれど・・・。

この回答へのお礼

ありがとうございます。
参考になりました！

お礼日時：2021/07/27 12:53