具有 2 列和 5 个项目的 flex 布局[重复]

Question

我想要一个包含 2 列和 5 个项目的布局。我已经通过宽度和边距实现了这一点，但我宁愿使用 css flex 构建它，这样我就可以控制每个项目的高度。项目是通过 foreach 循环运行的博客元素（图像、标题、正文部分）。

由于项目内的内容是灵活的（即它是博客项目，我设置了文本限制，但更大的字仍然会导致高度扩大），我需要项目 2>5 的高度与 1 相同.

我还需要再次输出相同的内容，这次交换布局以提供一些视觉差异（我正在使用一个类来改变这些）。

见下图。

我有一个使用以下代码设置的 codepen，但无法在 2/3 以下获得 4/5 - 更不用说完成第二组 (6/10)。 https://codepen.io/grhmstwrt/pen/JjGQpmd

.container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: flex-end;
  width: 1140px;
}

.item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  // margin-top: 10px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
.item:nth-of-type(1), .item:nth-of-type(6){
  // flex-grow: 2.5;
  width: 50%;
  height: 300px
}
.item:nth-of-type(6){
  float: right;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  
  <div class="item alt">6</div>
  <div class="item alt">7</div>
  <div class="item alt">8</div>
  <div class="item alt">9</div>
  <div class="item alt">10</div>
</div>

Answer 1

我认为网格是这种布局而不是 flex 的方式。 HTML：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  
  <div class="item alt">6</div>
  <div class="item alt">7</div>
  <div class="item alt">8</div>
  <div class="item alt">9</div>
  <div class="item alt">10</div>
</div>

CSS：

    .container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 1140px;
}

.item {
  background: tomato;
  padding: 5px;
  width: auto;
  min-height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

.item:nth-of-type(1) {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.item:nth-of-type(10) {
  grid-column: 3 / span 2;
  grid-row: 3 / span 2;
}

示例：https://codepen.io/skeurentjes/pen/ZEQdrPN?editors=1100