Javascript 如何制作内联六边形 gallery

  .hexagon-gallery {
    margin: auto;
    margin-top: 50px;
    max-width: 1000px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 200px;
    padding-bottom: 50px;
  }
  
  .hex {
    display: flex;
    position: relative;
    width: 240px;
    height: 265px;
    background-color: #424242;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
  
  .hex:first-child {
    grid-row-start: 1;
    grid-column: 3 / span 2;
  }
  
  .hex:nth-child(2) {
    grid-row-start: 1;
    grid-column: 4 / span 2;
  }
  
  .hex:nth-child(3) {
    grid-row-start: 1;
    grid-column: 6 / span 2;
  }
  

       <section class="hexagon-gallery">
            <div class="hex"><img src="https://images.pexels.com/photos/1421264/pexels-photo-1421264.jpeg?cs=srgb&dl=aerial-aerial-photo-aerial-photography-1421264.jpg&fm=jpg" alt="some"></div>
            <div class="hex"></div>
            <div class="hex"></div>
          </section>