How to make CSS hexagon/honeycomb grid (based on set math equations) flexible?

Question

So I´ve made a CSS hexagon/honeycomb grid based on set math equations but I can´t seem to make it flexible.

Can´t seem to convert grid-auto-rows (.hexGridA and . hexGridB) from px to % in a meaningful way. What am I doing wrong?

.hexGrid {
  width: 1000px; /* original value */      /* <=== WANT TO CHANGE THIS TO FLEXIBLE UNITS! */
  margin: 1%;
  background-color: mediumaquamarine;
}

.hexGridA {
  width: 96%; /* % of .hexGrid.width: (.hex.width x 0.75) x (..grid-auto-rows x2) + ((.hex.width x 0.1) x 3), for size + space between hexes */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px; /* original value */      /* <=== WANT TO CHANGE THIS TO FLEXIBLE UNITS! */
  margin-top: 0.5%; /* ..grid-auto-rows x 0.05, for space between hexes verticaly, .hexGridA + .hexGridB work in conjunction */
  background-color: gold;
}

.hexGridB {
  width: 96%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px; /* original value */      /* <=== WANT TO CHANGE THIS TO FLEXIBLE UNITS! */
  margin-left: 16%; /* (.hex.width x 0.75) + (..grid-auto-rows x 0.10), for size + space between hexes (.hexGridA and .hexGridB) */
  margin-top: 0.5%; 
  background-color: pink;
}

https://codepen.io/AtomicLynx/pen/QWGdJYz

https://github.com/AtomicLynx/CSSHexagonGrid-wClip-Path

Thanks!

Temani Afif · Accepted Answer · 2021-02-14 10:33:40Z

0

Here is an approximation using flexible unit

img {
  width: 100%;
  height: auto;
  display: block;
  object-fit:cover;
}

.hexGrid {
  width: 75%;
  margin: 1% auto;
  background-color: mediumaquamarine;
}

.hexGridA,
.hexGridB {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.hexGridB {
  transform: translateX(calc(100%/6));
  margin: calc(-9.62% + 2px) auto; /* 100%*cos(30)/9 */
}

.hex {
  display: flex;
  width: calc(100%*2/3 - 2px);
  background-color: #424242;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.hex::before {
  content: "";
  padding-top: 86.6%;/* 100%*cos(30) */
}

<body>
  <div class="hexGrid">
    <div class="hexGridA">
      <div class="hex"><img src="https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg" alt="pic"></div>
      <div class="hex"></div>
      <div class="hex"></div>
    </div>
    <div class="hexGridB">
      <div class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
    </div>
    <div class="hexGridA">
      <div class="hex"><img src="https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg" alt="pic"></div>
      <div class="hex"></div>
      <div class="hex"></div>
    </div>
    <div class="hexGridB">
      <div class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
    </div>
    <div class="hexGridA">
      <div class="hex"><img src="https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg" alt="pic"></div>
      <div class="hex"></div>
      <div class="hex"></div>
    </div>
    <div class="hexGridB">
      <div class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
    </div>
  </div>
</body>

edited Feb 14, 2021 at 10:33

answered Feb 14, 2021 at 10:15

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Linus Ahlborg Over a year ago

When I add .hex:hover, it seems to target the whole hex in .hexGridB, but only partial hex in .hexGridA. What could be the problem?

Temani Afif Over a year ago

@LinusAhlborg no the hover won't work here because we have an overlap between rows. If you want to consider hover effect you will need a complete different idea

Temani Afif Over a year ago

@LinusAhlborg here is a trick to avoid the issue: jsfiddle.net/31rp6dn4

Collectives™ on Stack Overflow

How to make CSS hexagon/honeycomb grid (based on set math equations) flexible?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related