#IE11 で #CSS グリッドは難しくない

今回、この記事でAutoPrefixerは利用しません。

IE11は[x]でrepeatを指定できます

.app {
  grid-template-rows: 45px repeat(3, 1fr); /* 縦幅 */
  -ms-grid-rows: 45px (1fr)[3];/* IE11は[]でrepeatを指定 */
  
  grid-template-columns: 200px repeat(2, 1fr); /* 横幅 */
  -ms-grid-columns: 200px (1fr)[2];/* IE11は[]でrepeatを指定 */
}

minmax()は、IE11で利用できますが、auto-fitとauto-fillは利用できません。

fit-content()も、IE11で利用できませんが代替の手段があります。

グリッドの列/行にminmax(min-content, max-content)を適用し、子要素にmax-width: [value]を設定します。

IE11以外のブラウザでは、fit-contentの代わりにautoを指定しても同じです。

.app {
  grid-template-rows: 45px fit-content(50vw);
  -ms-grid-rows: 45px minmax(min-content, max-content);/* IE11はminmax＋max-widthで、fit-contentを指定 */
  
  grid-template-columns: 200px fit-content(50vw);
  -ms-grid-columns: 200px minmax(min-content, max-content);/* IE11はminmax＋max-widthで、fit-contentを指定 */
}
.app [role=main11] {
  max-width: 50vw;/* IE11のmax-width */
}

ちなみに、IE11のautoの動きは他のブラウザと異なります。

IE11で他のブラウザのautoを再現しようと試みましたが、minmax(min-content, 1fr)は、横幅がコンテンツの量に対応せず、 minmax(min-content, 100%)、minmax(min-content, auto)は使用することができません。

その場合は、minmax(min-content, max-content)が一番、最適だと思われます。

コード全体　プレビュー

参考文献