javascript - 如何使用 CSS 网格制作一个包含 7 项的菱形网格？

Question

如何使用 CSS Grid 复制以下内容？

到目前为止，我有以下内容:

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

但这会使第一列留下 3 个元素(不需要)...

此外，align-items: center; 第一列和最后一列如何产生 菱形 效果？

Answer 1

您可以使用如下简化的代码:

.box{
  background: #123456;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  gap:15px;
}
.box:last-child {
  grid-column:2;
}
.box:nth-child(1),
.box:nth-child(3),
.box:nth-child(4),
.box:nth-child(6) {
  transform:translateY(50%);
}

<div class="wrapper">
   <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>