如何使 CSS 六边形/蜂窝网格基于集合数学方程灵活？

问题描述

所以我基于集合数学方程制作了一个 CSS 六边形/蜂窝网格，但我似乎无法让它变得灵活。

似乎无法以有意义的方式将网格自动行（.hexGridA 和 .hexGridB）从 px 转换为 %。我做错了什么？

.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

谢谢！

解决方法

这是一个使用灵活单位的近似

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>

hexagonal-tiles