DIV布局像蜂窝一样

Question

DIV布局像蜂窝一样

3

我正在尝试制作一个具体的布局，但在使用网格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>

我试图实现的布局是：

- Tinabot

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

我会像下面这样做。将同一区域内的所有元素一起移动，以更新它们的位置。

.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>