Html 如何使用flexbox创建完全环绕主图像的图像网格？

我想创建一个网格的图像，首先有一个大的特色图像，然后它的权利，有一个网格4（每行2）。。然后在下面，一次4行图像

松散地基于

我认为flexbox可能能够解决这个问题

假设我有一些这样的标记

 <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>

这几乎满足了我的需要。代码笔

不过我需要两件事

在特征图像右侧显示4个图像，而不是当前的2个

拉伸每个图像以适应其空间，使其成为一个紧密的网格（任何图像周围都没有间距）。我正在考虑使用

objectfit

CSS属性，但我还没有让它工作

谢谢。

。图像网格{
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
宽度：200px；
高度：100px；
}
.image grid、.featured>img:第一个孩子{
宽度：100px；
高度：100px；
}
.image grid>img{
宽度：50px；
高度：50px；
}

>P>所以我认为最简单的方法是使用一个框架，比如Foundation来创建最上面的行，然后使用FrasBox。
<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>

代码笔

它需要一些工作使其响应，但它能满足我的需要。
有趣的想法，但我只希望主图像右侧有4幅图像。并不是所有的图像。代码都更新了！不管怎么说，你的问题就像是把所有的图片都围绕在一个特色图片上，我在上一个代码中也做了同样的事情，现在代码根据你最近的评论进行了更新
<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>

.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;
}