About
本サイトについて
趣味で開発したプログラムや開発メモを載せています。
ソースコードはGithubで公開しつつ、なるべく後から分かるように解説に努めてますので、
誰かのお役に立てれば嬉しいです。
プロフィール
kght6123
佐賀県出身で1985年生まれ。
三重県四日市市在住のシステムエンジニア。家庭を大事にしたい2児の父。
趣味で開発したプログラムや開発メモを載せています。
ソースコードはGithubで公開しつつ、なるべく後から分かるように解説に努めてますので、
誰かのお役に立てれば嬉しいです。
佐賀県出身で1985年生まれ。
三重県四日市市在住のシステムエンジニア。家庭を大事にしたい2児の父。
今回、この記事で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)
が一番、最適だと思われます。