1

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でしか動作しないようです。標準がまだリリースされていないことは知っていますが、これは本来あるべき姿ですか?

スペースに収まる偶数の列を確保するための他の手法はありますか?

4

1 に答える 1