使特殊订单生成Grid-Item-List。 （例如使用柔性盒等）

Question

我正在尝试制作一个特殊的网格列表，但我找不到一个有效的解决方案（在桌面和移动设备上），也许你们中的某个人知道解决方案或者给我一个提示。

我需要一个带有特殊布局的列表（左图），这不是通过添加多个嵌套网格的问题，但是（！）我想在list-element（包装器）上添加一个类，并想要另一个网格布局（右图）。我尝试使用flexbox，我认为没有css3解决方案，我必须用javascript做 - 但在我采用js解决方案之前，我想问你，也许你知道一个更好的。

为了更好地理解我添加了一个图像来说明我的意思。

Answer 1

这是一个可能性，玩边缘

.list {
  display: inline-flex;
  flex-wrap: wrap;
  width: 150px;
  border: solid 1px green;
  margin: 5px;
}

.item {
  width: 50px;
  height: 50px;
  box-shadow: inset 0px 0px 0px 1px blue;
}

.list:not(.first) .jumbo {
  width: 100px;
  height: 100px;
  margin-bottom: -100px;
}

.list:not(.first) .jumbo + .item {
  margin-right: 100px;  
}
.first .item:first-child {
  width: 150px;  
}

<div class="list">
  <div class="item">1</div>
  <div class="item jumbo">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<div class="list first">
  <div class="item">1</div>
  <div class="item jumbo">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>