I am struggling with implementing a specific layout using grid CSS and I'm open to 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 desired layout looks like this: https://i.sstatic.net/aXnZQ.png