css-grid レイアウトを学習しようとしています。Chrome、FireFox、および FireFox Developer のグリッド フラグをオンにしました。また、毎晩 FireFox をダウンロードしました (現在 52.0a1 (2016-11-07) (64 ビット))。私はMacを使っています。
私の計画は、このauto-fill
機能を使用して偶数の列を確保することでした。だから私はこれをしました:
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 2.5vw 2.5vw);
}
Chrome では機能しましたが、すべての FF でinvalid property value
デバッガーにエラーが表示されます。
Rachel Andrew のこのグリッドの例を見ています。3 番目の例では、一定数の繰り返しパターンを使用しています。
.wrapper {
display: grid;
grid-template-columns: repeat(11, [col] 4fr [gutter] 3.5fr ) [col] 4fr [gutter];
grid-template-rows: auto repeat(4, [row] auto [gutter] 15px);
}
繰り返し回数を数値に変更してみましたが、すべてのブラウザーで機能します。しかしauto-fill
、Chromeでしか動作しないようです。標準がまだリリースされていないことは知っていますが、これは本来あるべき姿ですか?
スペースに収まる偶数の列を確保するための他の手法はありますか?