8 个项目的独特 grid/flex 布局

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>

8 个项目的独特 grid/flex 布局

Unique grid/flex layout for 8 items

css

flexbox

css-grid