IE11でのgrid-gap

vagrantというものを立ち上げてみたり、gitを操作したりと、自分がwebデザイナーであることを忘れてしまいがちな今日この頃…

最近は設計をやることが多いので、コーディングからちょっと離れていただけでコードの書き方を忘れる＆知らない間に新しいタグが増えてて困惑しますね。

今日は巷で流行りのgridレイアウトの「grid-gap」について、IE11での対処法について説明します。

grid-gapはIE11では未サポートのため、別の対応が必要になります。
column-gapは対応しているのですがrow-gapも未対応です。
gap (grid-gap)

IE11では未対応のため、ハックを使って擬似的にgrid-gapを使用します。

IE11のハック

@media all and (-ms-high-contrast:none){ //IE11
    *::-ms-backdrop, .セレクタ {
        プロパティ
    }
}

@media all and (-ms-high-contrast:none){ //IE11

*::-ms-backdrop, .セレクタ {

プロパティ

}

上記のハックをつかったコードがこちら↓

HTML


&lt;div class="guide_parent"&gt;
&lt;div class="guide_child"&gt;Grid1&lt;/div&gt;
&lt;div class="guide_child"&gt;Grid2&lt;/div&gt;
&lt;div class="guide_child"&gt;Grid3&lt;/div&gt;
&lt;div class="guide_child"&gt;Grid4&lt;/div&gt;
&lt;div class="guide_child"&gt;Grid5&lt;/div&gt;
&lt;div class="guide_child"&gt;Grid6&lt;/div&gt;
&lt;/div&gt;

</div>

CSS

.guide_parent {
    grid-gap: 20px;
    max-width: 1090px;
    margin: 0 auto;
}

.guide_child {
    width: 100%;
    background: #EEE;
}
@media all and (-ms-high-contrast:none){ //IE11
    *::-ms-backdrop, .guide_child {
        width: calc(100% - 20px);
        margin: 20px;
    }
}

.guide_parent {

grid-gap: 20px;

max-width: 1090px;

margin: 0 auto;

}

.guide_child {

width: 100%;

background: #EEE;

}

@media all and (-ms-high-contrast:none){ //IE11

*::-ms-backdrop, .guide_child {

width: calc(100% - 20px);

margin: 20px;

}

ハックはあまり使わない方がいいので、IE11に対応しなければいけない場合には別の記述の方がおすすめです。

gridレイアウトはflexレイアウトに比べてブラウザ間の差異がまだまだありますが、
SCSSのautoprifixerがバージョンアップしたので、gridにも大分対応できるようになったそうです！

今後のバージョンアップにも期待ですね。

＜参考サイト＞
CSS Grid Layout Module（IE対応)
css グリッドレイアウト（display: grid;）をIE10/IE11でも対応させるためにはどうすればよいでしょうか？