応答性のある行ベースのグリッドレイアウト

Question

画像のグリッドが並んでいるページを持つWebサイトを構築しました。説明のため あなたはhereそれを見つけることができますが、原理的には、次のようになります。

1. 行の高さがflexibelです。
2. 行は、画面の幅（余白付き）を塗りつぶします。
3. 1行あたりの画像数は固定されていないため、ウィンドウサイズによって変更する必要があります。
4. 画像の寸法は任意です。 Iは、行の高さは、最小値と最大高さとの間にあると、私は場合は、新しい行が作成または削除、列の中に応じて画像を配信することがjQueryのようなJS /内のすべての計算をやっている時点で

必要。ブラウザのサイズ変更イベントでは、値を再計算し、イメージのサイズを調整し、必要に応じて、ある行から別の行にピクチャを移動します。

これはデスクトップ画面でも機能しますが、小さな（モバイルなどの）画面にも対応するレスポンシブデザインに切り替える必要があり、現時点ではjs/jQueryに重く依存する必要はありません。

私はすでにブートストラップとFoundationフレームワークを見つけましたが、それらのすべてがここでは動作しない固定列の合計列を使用しています。

これを実現する方法はありますか、それともCSSのみを使用しているのでしょうか？

Answer 1

あなたは約flexboxを知っていますか？例えば、あなたはアイテムとコンテナがコンテナに基づい幅にすることができます。

https://jsfiddle.net/h9yhds8b/

<div class="container" style="width: 100%; margin: 10px; display: flex;"> 

<div class="item" style="background-color: red; margin: 10px; padding: 10px; flex: 1;"> 
    <h1>Test</h1> 
    <p>This is a lorem ipsum text</p> 
</div> 

<div class="item" style="background-color: red; margin: 10px; padding: 10px; flex: 1;"> 
    <h1>Test</h1> 
    <p>This is a lorem ipsum text</p> 
</div> 

<div class="item" style="background-color: red; margin: 10px; padding: 10px; flex: 1;"> 
    <h1>Test</h1> 
    <p>This is a lorem ipsum text</p> 
</div> 

<div class="item" style="background-color: red; margin: 10px; padding: 10px; flex: 1;"> 
    <h1>Test</h1> 
    <p>This is a lorem ipsum text</p> 
</div> 


</div> 

が、私はそれで何かをやってみました https://css-tricks.com/snippets/css/a-guide-to-flexbox/