他のdivとdivを高さと幅で塗りつぶします

Question

divを持つパーツにパーセンテージまたは固定の次元を持つことができます。私はグリッドを形成するためにdivを同じサイズの他のdivで完全に埋める必要があります。

いくつかのアイデアですか？

編集： 私はあなたがフレックスディスプレイを使用することができると思う

Answer 1

下記すぐに目に見えるものに類似したグリッドを生成したいです。私は、固定コンテナの使用法を示す簡単な例を書いた：http://jsbin.com/huqituhewu/edit?html,css,output。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/：

.container { 
    position: fixed; 
    height: 100px; 
    width: 100px; 
    display: flex; 
} 

.container > * { 
    flex: 1; 
} 

フレックスについての素晴らしいチュートリアルがあります：あなたは、子のdivのは、次のようにスペース（jsbinリンクから、それの一部）を埋めることができます。

複数行の表示が必要な場合は、さらにすばらしいグリッドを作成してください。

EDIT：フレックスラップと最小幅のスタイルを追加しました。あなたのコンテナにもっと多くのアイテムがあると、行が形成されます。注目すべきは、列に4つ以下のアイテムがある場合、それらは全幅にうまく伸びることです。 4つ以上のアイテム（100％/ 25％（最小幅= 25％）= 4）がある場合、幅とラップを保持します。子divの量と最小/最大幅で再生し、効果を確認します。