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

【问题标题】：How to make CSS hexagon/honeycomb grid (based on set math equations) flexible?如何使 CSS 六边形/蜂窝网格（基于集合数学方程）灵活？
【发布时间】：2021-05-17 12:30:24
【问题描述】：

所以我根据集合数学方程制作了一个 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

谢谢！

【问题讨论】：

标签： css hexagonal-tiles

【解决方案1】：

这是使用灵活单位的近似值

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>

【讨论】：

当我添加 .hex:hover 时，它似乎针对 .hexGridB 中的整个十六进制，但仅针对 .hexGridA 中的部分十六进制。可能是什么问题？
@LinusAhlborg 不，悬停在这里不起作用，因为我们在行之间有重叠。如果你想考虑悬停效果，你需要一个完全不同的想法
@LinusAhlborg 这里有个技巧可以避免这个问题：jsfiddle.net/31rp6dn4