DIV layout like honeycomb

Tinabot Published at Dev

Tinabot

I am trying to make a specific layout, and I am struggling with the grid CSS. I am open using flex or any other method.

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

the layout I am trying to achieve is: the layout I am trying to achieve is:

Temani Afif

I would do it like below. All the element inside the same area then translate to update their position

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

Collected from the Internet

Please contact [email protected] to delete if infringement.