如何在小屏幕上制作蛇形的响应式css六边形网格？答案

【问题标题】：How to make responsive css hexagon grid in a snake shape when on a small screen?如何在小屏幕上制作蛇形的响应式css六边形网格？
【发布时间】：2021-08-26 18:51:43
【问题描述】：

现在六边形看起来像这样：5 hexagon grid

我希望它们在小屏幕上看起来像这样：vertical hexagon grid

.hexagon-gallery {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 1rem;
}

.hexagon-gallery::before {
  content: '';
  width: 0;
  padding-bottom: 55%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.hex {
  grid-column-end: span 2;
  grid-row-end: span 4;
  display: flex;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background-size: cover;
  background-color: rgb(5, 132, 67);
}

<div class="hexagon-gallery">
  <div
    class="hex bg-center row-start-1 col-start-1">
  </div>
  <div
    class="hex bg-center row-start-1 col-start-3">
  </div>
  <div
    class="hex bg-center row-start-1 col-start-5">
  </div>
  <div
    class="hex bg-center row-start-4 col-start-2 ">
  </div>
  <div
    class="hex bg-center row-start-4 col-start-4 ">
  </div>
</div>

【问题讨论】：

您好，您的代码实际上只显示堆叠的六边形。您是否正在寻找这样的东西：codepen.io/gc-nomade/pen/wvJgbba？
@G-Cyrillus 是也不是。我希望它们像那样组合在一起，但一行中只有 5 个。我真的很困惑如何让“第 n 个孩子”工作。你如何让他们重复？
我在一个伪元素内使用带有 shape-outside 的重复 svg 背景来使它们环绕。对于 nth-child() 和 grid ，您需要使它们跨越 2 列，然后决定它们在第 1 列或第 2 列的位置。
@G-Cyrillus 好吧...我仍然觉得我在您的代码中遗漏了一些东西。我已经弄清楚了这些列，但由于某种原因我正在努力处理这些行。我需要他们中的 15 个
例如，我在 sn-p 下面添加了。负边距就足够了

标签： html css responsive-design grid responsive

【解决方案1】：

这里是前面评论的想法的一个例子。

请注意，我将伪元素自己移动到了十六进制，因此网格从它所拥有的子元素开始扩展，无需设置行高，孩子们自己做。

.hexagon-gallery {
  display: grid;
  grid-template-columns:  1fr 1fr 1fr;
  gap:1em;
}

.hex::before {
  content: '';
  width: 0px;;
  padding-bottom: 120%;
}

.hex {
  grid-column: 1 / span 2;
  margin-bottom:-30% ;
  display: flex;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background-color: rgb(5, 132, 67);  
}
.hex:nth-child(odd){
  grid-column: 2 / span 2
}

<div class="hexagon-gallery">
  <div
    class="hex bg-center row-start-1 col-start-1">
  </div>
  <div
    class="hex bg-center row-start-1 col-start-3">
  </div>
  <div
    class="hex bg-center row-start-1 col-start-5">
  </div>
  <div
    class="hex bg-center row-start-4 col-start-2 ">
  </div>
  <div
    class="hex bg-center row-start-4 col-start-4 ">
  </div>
</div>

【讨论】：