html - 蜂窝状DIV布局

Question

我正在尝试制作一个特定的布局，但我正在努力处理网格 CSS。我使用 flex 或任何其他方法打开。

.container {
display: grid;
grid-template-columns: repeat(auto-fit, 50px);
grid-template-rows: repeat(auto-fit, minmax(80px, 80px));
width: auto;
justify-content: center;
grid-auto-rows: 80px;
margin-bottom: 30px;
width: 322px;
height: auto;
}

.container  > * {
-webkit-clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}

.block {
position: relative;
height: 100px;
background-color: #fff2aa;
grid-column: 2 span;
display: flex;
align-items: center;
justify-content: center;
}

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

我想要实现的布局是:我想要实现的布局是:

Answer 1

我会像下面那样做。同一区域内的所有元素然后转换以更新它们的位置

.container {
  display: grid;
  margin: 150px;
  width: 150px;
  aspect-ratio: 1.15;
}

.block {
  grid-area:1/1;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%,75% 100%,25% 100%,0 50%);
  background-color: #fff2aa;
  box-shadow: inset 0 0 50px 25px #ff9a0073;
}

.container > :nth-child(1) {
  transform: translateY(100%);
}
.container > :nth-child(2) {
  transform: translateY(-100%);
}
.container > :nth-child(3) {
  transform: translate(-75%,-50%)
}
.container > :nth-child(4) {
  transform: translate(75%,-50%)
}
.container > :nth-child(5) {
  transform: translate(75%,50%)
}
.container > :nth-child(6) {
  transform: translate(-75%,50%)
}

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>