タグ付けされた質問 「grid-layout」

私は次のようなコンテナを備えたシンプルなフレックスボックスのレイアウトを持っています： .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } 次に、最後の行のアイテムを他のアイテムと揃えます。 justify-content: space-between;グリッドの幅と高さを調整できるため、使用する必要があります。 現在のように見えます ここでは、右下のアイテムを「中央の列」に入れたいと思います。それを達成する最も簡単な方法は何ですか？これは、この動作を示す小さなjsfiddleです。 .exposegrid { display: flex; flex-flow: row wrap; justify-content: space-between; } .exposetab { width: 100px; height: 66px; background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 5px; box-shadow: 1px 1px 2px …

378 css  flexbox  grid-layout 

Androidにフォトブラウザーを実装するには、グリッドを使用する必要があります。そこで、GridViewとGridLayoutの違いを知りたいのですが。 だから私は正しいものを選ぶつもりです。 現在、GridViewを使用して画像を動的に表示しています。

212 android  grid  android-gridview  grid-layout 

この問題には簡単な解決策があると確信しています。基本的に、2つの列がある場合、どうすればそれらの間にスペースを追加できますか？ たとえば、htmlが次の場合： <div class="col-md-6"></div> <div class="col-md-6"></div> 出力は、ページの幅全体を占める、隣り合った2つの列になります。幅が1000px次に設定されているとすると、各divは500px広くなります。 100px2つの間にスペースが必要な場合、どうすればこれを達成できますか？明らかに、ブートストラップを介して自動的にdivサイズは450pxそれぞれのスペースを補うようになります

202 html  css  twitter-bootstrap-3  grid-layout 

StackаэтотвопросестьответынаStack Overflowнарусском：Сеткаизадаптивных（sensitive）квадратов レスポンシブな正方形のレイアウトを作成するにはどうすればよいのでしょうか。各正方形には、垂直方向と水平方向に配置されたコンテンツがあります。具体的な例を以下に示します...

170 html  css  responsive-design  grid-layout  aspect-ratio 

TL; DR：table-layout: fixed CSSグリッドのようなものはありますか？ 私は、月を表す4x3の大きなグリッドと、日を表す7x6のグリッドがネストされた年表示のカレンダーを作成しようとしました。 カレンダーはページを埋める必要があるため、年グリッドコンテナーの幅と高さはそれぞれ100％になります。 .year-grid { width: 100%; height: 100%; display: grid; grid-template: repeat(3, 1fr) / repeat(4, 1fr); } .month-grid { display: grid; grid-template: repeat(6, 1fr) / repeat(7, 1fr); } これが実際の例です：https : //codepen.io/loilo/full/ryXLpO/ 簡単にするために、そのペンでは毎月31日あり、月曜日から始まります。 また、問題を示すために、途方もなく小さいフォントサイズを選択しました。 グリッドアイテム（=日のセル）は、ページ上に数百個あるため、かなり凝縮されています。そして、日番号のラベルが大きくなりすぎると（左上のボタンを使用してペンのフォントサイズを自由に試してみてください）、グリッドのサイズが大きくなり、ページの本文サイズを超えます。 この動作を防ぐ方法はありますか？ 私は最初に年グリッドの幅と高さを100％と宣言したので、それがおそらく最初のポイントですが、そのニーズに合うグリッド関連のCSSプロパティを見つけることができませんでした。 免責事項： CSSグリッドレイアウトを使用せずに、そのカレンダーのスタイルを設定する簡単な方法があることを知っています。ただし、この質問は、具体的な例を解くというよりは、トピックに関する一般的な知識に関するものです。

153 css  grid-layout  css-grid 

Flexboxを使用してこれを達成することは不可能であると私は収集しています。各行はその要素に合わせるために必要な最小の高さしかあり得ないのですが、これは新しいCSSグリッドを使用して達成できますか？ 明確にするために、グリッド内のすべての要素の高さを、各行だけでなく、すべての行にわたって等しくしたいと考えています。基本的に、最も高い「セル」は、その行のセルだけでなく、すべてのセルの高さを示します。

98 css  flexbox  grid-layout  css-grid 

次のようなブートストラップ列を作成する方法がわかりませんでした。 col 3 | col 4.5 | col 4.5

80 twitter-bootstrap  twitter-bootstrap-3  multiple-columns  grid-layout