css-grid

5熱

1答えて

アイテムが動的に追加されるグリッドがあります。要するに、これらのカラムが充填されていない場合は、すべてのカラムを使用します。たとえば、この図では、茶色とシアンの要素を右端に移動します。各項目にスパンする列の数を指定して手動で行うこともできますが、自動的に実行したいと思います。一部の結果コード：各項目の #wrapper { background-color: white;

3熱

1答えて

私は私のグリッドブロック内の行のテンプレートを作成しようとしているすべての行

用グリッドのテンプレート行を繰り返す方法： grid-template-rows: repeat(3, 150px); 私が知っている、このテンプレートは、最初の3行のための仕事でなければなりません。ただし、から4行このテンプレートは機能しません。すべての行に対してテンプレートを作成できますか？ P.S. このテンプレートは1行目でのみ動作します。 grid-template-rows:

1熱

3答えて

ラップ後にフレックスアイテムを適切な列に保持する

justify-contentを使用してコンテナ内のdivを正しく正当化しようとしていますが、このオプションは期待通りの動作をしていません。 1 2 3 4 5 なく好き：私はそうのように私の例の2行目の秩序を維持するためにコンテナ内に私のdivのを望ん 1 2 3 4 5 .container { display: flex; width: 1100px

1熱

1答えて

CSSグリッド：最後の列を動的に広げる

グリッド内の残りのスペースを占めるように最後の列を自動的に広げることは可能ですか？基本的に私はこれを達成しようとしています： .row { display: grid; grid-template-columns: repeat(3, 1fr); } .col { background: blue; padding: 20p

2熱

1答えて

IE/EDGEのCSSグリッド自動配置

IE 11とEDGEでサポートされている古いCSSグリッド仕様を使用しています。グリッド項目を現在の仕様のように自動配置することは可能ですか？すなわち、グリッド項目の列を定義する必要はないため： .item:nth-child(1) { -ms-grid-column: 1; } .item:nth-child(2) { -ms-grid-column: 2; } .

6熱

2答えて

CSSグリッドレイアウトで列の最大幅を設定する方法は？私が達成したい何

：サイズは、その内容から、だけで、ウィンドウ幅の20％にまで導かれ、右側の列でページを持っている、CSS Grid Layoutを使用しました。 div { border-style: solid; } #container { width: 300px; height: 300px; display: grid;

2熱

1答えて

IE10/11をサポートするCSSグリッド構文

IE10および/またはIE11のグリッドレイアウトをサポートするにはどうすればよいですか？これまでのところ、-ms-という接頭辞がトリックを行う必要があることがわかりましたが、Edgeブラウザでしか動作しません。私はMicrosoftのドキュメントとMDNネットワークを調べようとしましたが、何か助けになるものは見つかりませんでした。あなたは、コードを見ることができますは、私が使用：あなたはそ

0熱

1答えて

位置divはCSSグリッドで指定された別の場所に移動します

作成した場所divはabout divの右側に移動するのではなく、タイトルヘッダーの右側に移動します。 https://jsfiddle.net/j0j4xfLe/3/ <div id="location"> <h3 class="content-title">Where are we?</h3> <p id="locationMap">Google Maps</p>

5熱

1答えて

grid-column-gapによりオーバーフローが発生する

CSS display: gridをテストしました。正常に動作しますが、grid-column-gap: 10px;は親コンテナを壊します。下のコードの緑色の領域は、グリッド領域よりも小さいです。 box-sizing: border-box;は明らかに効果がありません。グリッド領域と親コンテナの幅を等しくするにはどうすればよいですか？ /* --------------------------

2熱

2答えて

CSSグリッドレイアウト2 * 3（マルチレベルグループ）

CSS Grid Layoutを使用して、未定義の行数（時には2、場合によっては3）で2列レイアウト[params-rendering]を作成しようとしています。レンダー列は、行数に関係なく特定の背景を持ちますが、列の高さは列間で等しくなります。私はそれをするために別のタグを置く必要があると思います。私はあなたにこのレイアウトのスクリーンショットを教えてください。それは私が与えることができるよ