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

Question

我正在尝试弄清楚如何在 Flexbox 中得到它，但我唯一能得到的是代码片段：

你有没有想法只管理这个 CSS（我不能真正触及 HTML 的结构，因为它是一个 PHP foreach 循环)?

可以使用 CSS grid 帮助吗？

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

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

此解决方案使用 css grid，请注意它在 Internet Explorer 中的 compatibility。

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

Answer 2

基于这是 squares 的事实，您可以简单地将 large 放在绝对右边，然后将 smaller，用他们的 padding-top 技巧，将控制 large 的 高度。

然后，通过在 grid 上设置填充，我们将左侧 保持较小 并使右侧 space 大.

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

堆栈片段

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

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

CSS Flexbox 3 columns Grid (4X4 + 1 large)

html

css

flexbox

css-grid