css-grid

2熱

1答えて

定義された領域外にグリッド領域やコンテンツがオーバーフローする問題があります。下のコードでは、緑色のフッターを下方向に押す必要がある十分なコンテンツが青いコンテンツ領域に表示されていますが、それは表示されません。私はそれがgrid-template-rowsプロパティと関係があると想定していますが、修正方法はわかりません。それも可能ですか？私はグリッドの固有の柔軟性が大好きですが、この1つの

0熱

1答えて

Css Grid Wrapカラムが行の高さを維持する

これがcss gridやcss flexboxで解決できるかどうかはわかりませんが、私は試してみると思います。で https://codepen.io/anon/pen/QMOWwr あなたは、ビューポートが小さすぎるラップ、複数の列でCSSグリッドを参照してくださいcodepen。これは、それがすべきことであり、CSSグリッドでこれがいかに簡単かがとても良いです。しかし、私が追加したいのは、列

0熱

1答えて

cssグリッドボックスの1つに入力ボックスを配置する

コンテナを2つのハーフに分割するCSSグリッドレイアウトを作成しました。おそらく私のコンタクトフォームの片面、テキストのもう片面。今、左側のボックスのすべての内容を保持する特定の<div>タグ内にブートストラップ3.x入力ボックスを追加しました。何らかの理由で、入力ボックスがボックスの内側にではなく左側のボックスの下に表示され、ボックスの垂直方向のサイズが縮小されます（画像の下端まで）。私は色が問

1熱

1答えて

グリッドコンテナ内の無制限の行

無限の数のdivを表示したいとします。それぞれの改行を新しい行にしたい。 wrap { display: grid; grid-template-rows: repeat(4, [row] 25px); } をそしてそれぞれのdivのために私は設定しています：：例えば今ラッパーに私は設定しています div1 { grid-row: "row" }, div2 { g

3熱

1答えて

CSS |グリッド自動列：min-content | IOS 10.3.3で動作していません

これに代わるものはありますか、あるいは浮動小数点に戻り、サポートが到着するまで待つ必要がありますか？ .grid_root { display: grid; grid-column-gap: 1px; grid-auto-flow: column; grid-auto-columns: min-content; } サンプル（電話でのフルスクリーンプレ

0熱

1答えて

CSSグリッド無限スクロールとダイナミックな内容

私はテンプレートを実装しようとしていますCSSグリッドとこちらをご覧ください：https://www.w3.org/TR/css-grid-1/ またはこの素晴らしい記事：https://css-tricks.com/snippets/css/complete-guide-grid/ しかし、私は、グリッドの行と列を定義する必要がありますCSSのように、このレイアウトが、例えば無限のスクロールの

0熱

1答えて

CSS4グリッド構造擬似クラスポリフィル（：n番目の列）

私は、各偶数列にマージンを追加したいCSSグリッドレイアウトを有します。 :nth-column疑似クラスはいいですが、すぐにはサポートされません。は、私が使用できる任意のpolyfillsはありますか私は自分自身を記述する必要がありますか？

4熱

3答えて

CSSグリッドのアイテムは残りのスペースを占有するには？

私はCSSグリッドレイアウトで構築されたカードを持っています。左に画像があり、右上にテキストがあり、右下にボタンまたはリンクがある可能性があります。以下のコードでは、緑色の領域を可能な限り多くの領域を占有させ、同時に青色の領域を可能な限り小さな領域にする方法を教えてください。緑色は、青色の領域をできるだけ下に押します。 https://jsfiddle.net/9nxpvs5m/ .grid

0熱

2答えて

CSSグリッドテンプレート：セルのクラスに応じて列を塗りつぶす

私は、セルを100％または50％幅にできる単純なグリッドレイアウトを使用しています。いくつかの細胞は、.leftまたは.rightクラスを有する。私のHTMLツリー内のそれらのセルの順序がどんなものであれ、新しい全幅セルが設定されるまで、そのクラスに応じて右または左のいずれかに追加することは可能ですか？私がこれまでに使用したコード： main{ display:grid; g