how to make a inline hexagon gallery

Question

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

Im trying to aim for something of a similar shape. Hexagon stretched typo shape , idk if there any other easier way to do this.Maybe a rectangle with both sides shaped could work I'm not sure.

Answer 1

Would that work ? I tidied the code a bit to remove extraneous CSS properties.

The main parts are:

• clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%, 15% 0%); to get the right shape.
• grid-auto-flow: column; and grid-auto-columns: 168px; (which is your .hex width -30%, since the shape cuts 15% on each side) to align the items correctly.`
• The z-index which should be in a decrement sequence so each item always cover the next one. If you remove the z-index you'll have the opposite effect (each element covered by the next one), as by default in HTML, an element at the bottom of its group of siblings appears "above" the elements above it.
• And just for tidyness grid-auto-rows: 0px; which replace the grid-row-start: 1; on each element.

.hexagon-gallery {
  display: grid;
  grid-auto-rows: 0px;
  grid-auto-columns: 168px;
  grid-auto-flow: column;
}

.hex {
  display: flex;
  width: 240px;
  height: 265px;
  clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%, 15% 0%);
}

.hex:first-child {
  background: red;
  z-index: 1000;
}

.hex:nth-child(2) {
  background: green;
  z-index: 900;
}

.hex:nth-child(3) {
  background: blue;
  z-index: 800;
}

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

To tweak the shape, modify the 85% and 15% (they should always add up to 100 if you want to keep a symmetric shape).
For example putting 75% and 25% instead will make the angle bigger.
Don't forget to change the grid-auto-columns value to width * (25*2)%, so 120px in this case to keep the correct spacing between each element.
Example with these parameters: