私はFlexのCSSでの相対的な高さと大きさの異なるグリッド
を達成したい私は、このようなグリッドに取り組んでいます： 
これは、一定の幅と高さでも問題ありません。しかし、私はそれが相対的な幅と高さで動作するようにすることはできません。すべての箱は正方形でなければなりません。幅は100％です。高さは同じでなければならないので、ハードコードされていません。すべてのボックスは、中央/中央に画像を表示します。
私は（ブートストラップグリッド、フレックス、ハードコーディングされたパッドなど）何を試しても、私はそれをかなりやることはできません。
ご協力いただきありがとうございます。
以下を確認してください。私はこれがあなたが必要とするものだと思います。
* {
box-sizing: border-box;
}
.container {
display: flex;
}
.big-image {
padding: 50px;
background-color: black;
margin-right: 1em;
}
.small-image {
padding: 50px;
background-color: black;
margin-right: 1em;
}
.small-images .small-image:nth-child(1) {
margin-bottom: 1em;
}<div class="container">
<div class="big-image"><img src="http://placehold.it/300"></div>
<div class="small-images">
<div class="small-image"><img src="http://placehold.it/100"></div>
<div class="small-image"><img src="http://placehold.it/100"></div>
</div>
<div class="small-images">
<div class="small-image"><img src="http://placehold.it/100"></div>
<div class="small-image"><img src="http://placehold.it/100"></div>
</div>
</div>のdivのその幅に等しいの高さを設定するためにはjQueryを使用してみてください。あなたは両親の高さを決定するためにコンテンツをしたいが、
<script>
$(document).ready(function() {
giveHeight();
$(window).resize(function() { giveHeight() });
});
function giveHeight() {
$(".col-xs-6").each(function() {
$(this).height($(this).css("width"));
});
}
</script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 red">BIG</div>
<div class="col-xs-6">
<div class="row ">
<div class="col-xs-6 red">1</div>
<div class="col-xs-6 red">2</div>
<div class="col-xs-6 red">3</div>
<div class="col-xs-6 red">4</div>
</div>
</div>
</div>
</div>
あなたのコードを含めてください、ありがとう – sol
私はあなたを得ることはありません...あなたは一定の高さを保つためにしたくないですか？それらは反対ではありません。すべての画像が同じ高さに等しくないかぎり、固定された高さ**を与えなくても、柔軟なコンテナをどのように固定すると思いますか？ –
私は問題はありません。理論的には、jsを使ってdivの幅を取得し、jsと同じ高さに設定することができました。しかし、私はより良い解決策があるだろうと推測しました。多分私の意図を明確にするためにコード構成を追加します。 – kingardox