Hexagon Pattern

[HexHands]

I copied and edited some code from this example: GitHub - web-tiki/responsive-grid-of-hexagons: CSS responsive grid of hexagons

For some reason my hexagons are not elongated height wise. How would I fix it?

https://replit.com/@HexHands/TediousOrnateDatasets?v=1

Thank you.

[WindLother]

In a regular hexagon, the height is sqrt(3) times the side length, you calculate the height to the width of the element, which is wrong.

Adjust your .hex css

.hex {
  position: relative;
  width: calc(100% * (1/3) - 10px); /* width of each hexagon */
  margin: 5px;
  background-color: rgba(0, 128, 128, 0.8);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  padding-bottom: calc(100% * (1/3) * 0.577); /*like here*/
}