title: how to make a inline hexagon gallery
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .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;
    }
    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>       &lt;section class="hexagon-gallery"&gt;
              &lt;div class="hex"&gt;&lt;img src="https://images.pexels.com/photos/1421264/pexels-photo-1421264.jpeg?cs=srgb&amp;dl=aerial-aerial-photo-aerial-photography-1421264.jpg&amp;fm=jpg" alt="some"&gt;&lt;/div&gt;
              &lt;div class="hex"&gt;&lt;/div&gt;
              &lt;div class="hex"&gt;&lt;/div&gt;
            &lt;/section&gt;
        </code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/saBZ2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/saBZ2.png" alt="enter image description here" /></a></p>
  <p>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.</p>