8 个项目的独特网格/弹性布局

Question

我正在尝试使用 grid/flex 解决特定的布局问题，但似乎找不到正确的答案。我有 8 个项目要以 3 3 2 布局运行。网格很容易，但我希望最后一行中的两个项目居中而不是左对齐。

附加的图像是我想要实现的。 3 column, 8 item grid

Answer 1

使用 6 列网格，而不是 3 列，然后相应地放置您的项目。

.box {
  border: 1px solid red;
  height:50px;
  grid-column: span 2;
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap:1em;
}

.box:nth-child(7) {
  grid-column: 2 / span 2;
}

.box:nth-child(8) {
  grid-column: 4 / span 2;
}

<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Flexbox 需要在项目上设置 c.1/3 的宽度。

.box {
  border: 1px solid red;
  height: 50px;
}

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

.box {
  flex: 0 0 30%;
}

<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>