問題タブ [css-grid]

一連のアイテムを含む単一の順序付きリストで構成されるレイアウトがあります。

すべてのアイテムは一貫した幅と高さを持っています - 最初のアイテムを除いて - (3x) 幅が (3x) 高さが (2x) 高いです。次のようになります。

Codepen デモ(ビューポートのサイズを変更して効果を確認)

現在、レイアウトを実現するためにフロートとインラインブロックを使用していますが、フレックスボックスが提供するいくつかの追加機能のためにフレックスボックスを使用したいと思います。

私はいくつかの試みをしましたが、成功しませんでした -

試み #1 - Codepen

試み #2 - Codepen

リストの前にフロートを使用して、最初の大きなリスト項目のスペースを確保します

次に、最初のリスト項目に絶対表示を設定します。

どちらの試行でも、最初の行の赤いボックスが伸びて、最初のアイテムの高さを埋めます。

これは可能ですか？

(そうでない場合は、CSS グリッドの回避策に興味があります)

フレックスボックスを使用してスクロール可能な水平レイアウトに配置しようとしているアイテムのリストがあります。

コンテナー内の各アイテムには左右のマージンがありますが、最後のアイテムの右マージンは折りたたまれています。

これを止める方法、または良い回避策はありますか?

次の HTML をメールで送信する PHP のスクリプトがあります。

しかし、受信した電子メール (メイン div を調べたとき) にはプロパティが表示されませんflex-direction: column;

gmail がこれらのプロパティをフィルタリングしているようです。

これは正常ですか？

W3C 勧告候補は 2016 年 9 月 29 日に公開されました。

https://www.w3.org/TR/css-grid-1/

Chrome/Firefox/IE は既に機能を実装しているため (多かれ少なかれ完全で機能フラグの背後にあります)、W3C による最終的な仕様は、これらのブラウザーのリリース日とほぼ同じになるでしょう。

通常の W3C プロセスと、特にこのワーキング グループの進捗状況に基づいて、最終的な仕様がいつ公開されるかを推定または大まかに推測できますか?

css-grid レイアウトを学習しようとしています。Chrome、FireFox、および FireFox Developer のグリッド フラグをオンにしました。また、毎晩 FireFox をダウンロードしました (現在 52.0a1 (2016-11-07) (64 ビット))。私はMacを使っています。

私の計画は、このauto-fill機能を使用して偶数の列を確保することでした。だから私はこれをしました：

Chrome では機能しましたが、すべての FF でinvalid property valueデバッガーにエラーが表示されます。

Rachel Andrew のこのグリッドの例を見ています。3 番目の例では、一定数の繰り返しパターンを使用しています。

繰り返し回数を数値に変更してみましたが、すべてのブラウザーで機能します。しかしauto-fill、Chromeでしか動作しないようです。標準がまだリリースされていないことは知っていますが、これは本来あるべき姿ですか?

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

「css グリッド レイアウト」 = https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

マウスが現在どの列/行にあるかを知るJavaScriptの方法を知っている人はいますか?

このようなものは、マウスが入っているセルを取得するための出発点だと思いますが、これは同じサイズのグリッドにのみ役立ちます。

等しくないセルでこれを行う方法はありますか?

更新 1 - codepen の追加

grid-template-columns: 25% 50% 25%;これは、3 つのさまざまなパーセンテージの列幅 ( )、2 行、要素を含まないグリッド セル、および複数の行にまたがる要素を示す codepen です: http://codepen.io/anon/pen/NbeOXp

更新 2 - マウスがどのグリッド セルにあるかを調べてみます。

ここでは、マウスが入っているセルを検出するために、グリッドの各セルに非表示の要素を追加しました。ただし、現在の要素に対してのみ「auto」を返します。また、非表示の要素をグリッド IMO に追加する必要があるのはかなり不格好です。 .

http://codepen.io/anon/pen/gLZBZwヒント: マウスを使用してグリッドにカーソルを合わせます。

minmax()CSS グリッド レイアウトに関連する機能でいくつかの問題に直面しています。

これが私のコードです：

CSS で言及されているようにユニットを使用するminmax()とfr、グリッド トラックの幅が最大値になり、ビューポートを縮小しても最大サイズのままになります。しかし、px次のように使用すると

期待どおりに動作しますが、理由はわかりません。

テスト済み: Chrome および Firefox

の使用方法を理解しようとしていますdisplay: grid。

これが私の例です：

https://jsfiddle.net/Lycuuu95/

一見、良さそうです。しかし、よくよく見てみると、いくつかの問題点が見えてきます。「コンテンツ」は「ラッパー」の外側にあり、画面の端までの距離も少し異なります。

非常に簡単に修正できます。

しかし、私はまだそれが唯一の適切な方法なのか、それとも上記のような問題なしにパーセントを使用できるのか疑問に思っていますか? すでに使用しようとしましbox-sizing: border-boxたが、問題は解決しません。

ノート：

display: grid現在、ブラウザの安定版ではそのままでは機能しません。

( http://caniuse.com/#feat=css-gridを参照)

この簡単な指示で有効にすることができます：

https://igalia.github.io/css-grid-layout/enable.html

また、Chrome Canary ではそのまま使用できます。