フレックスボックスを使用してメイン画像を完全に囲むイメージグリッドを作成する方法は？

Question

私は最初に大きな画像を持つ画像のグリッドを作成したいと思います。それから、グリッドは4（各行に2）です。そしてその下に、一度に4つの画像の行があります。

ゆるやかにthis designに基づいています。

フレックスボックスは、おそらくこれを釘付けにすることができると思います。

はほとんどが、私はそれが必要なものを行い、この

.image-grid { 
    display: flex; 
    flex-wrap: wrap; 
} 

img { 
    width: 100%; 
} 

.image-grid > div:first-child { 
    flex-basis: 50%; 
} 

.image-grid > div { 
    flex-basis: 25%; 
} 

私はCSSでこれ

<div class="image-grid"> 
    <div> 
    <img src="https://unsplash.it/1024/1024"> 
    </div> 
    <div> 
    <img src="https://unsplash.it/1000/800"> 
    </div> 
    <div> 
    <img src="https://unsplash.it/1100/1000"> 
    </div> 
    <div> 
    <img src="https://unsplash.it/1120/1000"> 
    </div> 
    <div> 
    <img src="https://unsplash.it/1130/1024"> 
    </div> 
    <div> 
    <img src="https://unsplash.it/1101/1024"> 
    </div> 
    <div> 
    <img src="https://unsplash.it/1020/1024"> 
    </div> 
    <div> 
    <img src="https://unsplash.it/1021/1024"> 
    </div> 
    <div> 
    <img src="https://unsplash.it/1002/1024"> 
    </div> 
    <div> 
    <img src="https://unsplash.it/1003/1024"> 
    </div> 
    <div> 
    <img src="https://unsplash.it/1004/1024"> 
    </div> 
    <div> 
    <img src="https://unsplash.it/1005/1024"> 
    </div> 
</div> 

のようないくつかのマークアップを持っていると言います。 Codepen here。

私はそれは厳しいですので、それは宇宙だ代わりに、各画像が収まるように現在の2

ストレッチの機能を備えた画像の右側に

1. ディスプレイ4枚の画像、...しかし固定された2つのものが必要グリッド（画像の周りにスペースはありません）。私はobject-fit CSSプロパティを使用することを考えていますが、まだ動作していません。

ありがとうございます。

Answer 1

.image-grid { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 
.image-grid, .featured > img:first-child { 
 
    width: 100px; 
 
    height:100px; 
 
} 
 
.image-grid > img { 
 
    width: 50px; 
 
    height:50px; 
 
}

<div class="image-grid featured"> 
 
    <img src="https://unsplash.it/1024/1024"> 
 
    <img src="https://unsplash.it/1000/800"> 
 
    <img src="https://unsplash.it/1100/1000"> 
 
    <img src="https://unsplash.it/1120/1000"> 
 
    <img src="https://unsplash.it/1130/1024"> 
 
</div> 
 
<div class="image-grid"> 
 
    <img src="https://unsplash.it/1101/1024"> 
 
    <img src="https://unsplash.it/1020/1024"> 
 
    <img src="https://unsplash.it/1021/1024"> 
 
    <img src="https://unsplash.it/1002/1024"> 
 
    <img src="https://unsplash.it/1003/1024"> 
 
    <img src="https://unsplash.it/1004/1024"> 
 
    <img src="https://unsplash.it/1005/1024"> 
 
</div>

Answer 2

だから私は、最も簡単な方法は、一番上の行を作成するために、財団のようなフレームワークを使用して、残りのフレキシボックスを使用することです考え出し。 CSS

.row { 
    max-width: 100%; 
    margin: 0 !important; 
} 

.columns { 
    padding: 0; 
} 

.featured-image img { 
    height: 400px; 
} 

.featured-image-grid img { 
    height: 200px; 
} 

img { 
    object-fit: cover; 
    width: 100%; 
} 

.image-grid { 
    display: flex; 
    flex-wrap: wrap; 
} 

.image-grid > img { 
    flex-basis: 25%; 
    height: 200px; 
    width: auto; 
} 

Codepen hereと

<div class="row"> 
    <div class="medium-6 columns featured-image"> 
    <img src="https://unsplash.it/1023/1024"> 
    </div> 
    <div class="medium-6 columns featured-image-grid"> 
    <div class="row"> 
     <div class="medium-6 columns"> 
     <img src="https://unsplash.it/1024/1024"> 
     </div> 
     <div class="medium-6 columns"> 
     <img src="https://unsplash.it/1022/1024"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="medium-6 columns"> 
     <img src="https://unsplash.it/1021/1024"> 
     </div> 
     <div class="medium-6 columns"> 
     <img src="https://unsplash.it/1020/1024"> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="image-grid"> 
    <img src="https://unsplash.it/1020/1024"> 
    <img src="https://unsplash.it/1020/1025"> 
    <img src="https://unsplash.it/1020/1022"> 
    <img src="https://unsplash.it/1020/1021"> 
    <img src="https://unsplash.it/1020/1029"> 
    <img src="https://unsplash.it/1020/1028"> 
    <img src="https://unsplash.it/1020/1027"> 
    <img src="https://unsplash.it/1020/1023"> 
    <img src="https://unsplash.it/1020/1024"> 
    <img src="https://unsplash.it/1020/1025"> 
</div> 

。

レスポンシブにするにはいくつかの作業が必要ですが、それは私が必要とするものに対して機能します。