CSS Flexbox 3列网格（4X4 + 1大）

Question

我试图弄清楚如何在Flexbox中获取此功能，但我唯一能得到的就是代码片段：

您是否只想管理此CSS（我无法触及HTML的结构，因为它是一个PHP foreach循环）？

可以在这里使用CSS grid吗？

＆＃13;

＆＃13;

.grid {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}

.photo {
  position: relative;
  flex: 0 0 calc(25% - 20px);
  margin: 10px;
  align-self: flex-start;
  overflow: hidden;
  background: black;
}

.photo:after {
  content: "";
  display: block;
  padding-top: 100%;
}

.large {
  flex: 0 0 calc(50% - 20px);
}

＆＃13;

<div class="grid">
  <div class="photo large"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

根据事实，这是正方形，您可以简单地将大绝对位于右侧，将小型放置在他们的 padding-top 技巧将控制 large的高度。

然后，通过在grid上设置填充，我们将较小的保留在左侧，并在右侧为 large 留出空间。< / p>

此外，我们还需要将 small 更改为空间的50％，而不是25％。

Stack snippet

.grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding-right: 50%;
}

.photo {
  position: relative;
  flex: 0 0 calc(50% - 20px);
  margin: 10px;
  overflow: hidden;
  background: black;
}

.photo:not(.large):after {
  content: "";
  display: block;
  padding-top: 100%;
}

.large {
  position: absolute;
  right: 0;
  width: calc(50% - 20px);
  height: calc(100% - 20px);
}

<div class="grid">
  <div class="photo large"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>

Answer 2

此解决方案使用css grid，请注意其compatibility与Internet Explorer。

.grid {
  display: grid;
  grid-gap: 10px;
  width:100vw;
  height:100vh;
  grid-template: "item1 item2 large large" "item3 item4 large large" 
}

.photo {
  background: black;
}
.large {
  grid-area:large;
}
.photo:nth-of-type(2){ grid-area:item1;}
.photo:nth-of-type(3){ grid-area:item2;}
.photo:nth-of-type(4){ grid-area:item3;}
.photo:nth-of-type(5){ grid-area:item4;}

<div class="grid">
  <div class="photo large"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>