html - 如何使用 CSS 制作蜂窝网格？

Question

我需要创建一个蜂窝网格，其中当屏幕宽度变化时，填充红色的 9 个蜂窝应始终位于中心。

更有可能的是，我的目标是与background-size: cover/object-fit: cover具有相同的效果，但对于容器/元素来说，所以如果宽度变小，黑色蜂窝就会溢出到屏幕，因此红色蜂窝将始终处于中心位置。

这是我目前正在使用的基础，但我似乎看不到背景大小:覆盖效果+此示例使用内联，因此随着宽度变小，行只会不断添加我想避免的.

.main {
  display: flex;
  --s: 100px;
  /* size  */
  --m: 4px;
  /* margin */
  --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
}

.container {
  font-size: 0;
  /*disable white space between inline block element */
}

.container div {
  width: var(--s);
  margin: var(--m);
  height: calc(var(--s)*1.1547);
  display: inline-block;
  font-size: initial;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  background: red;
  margin-bottom: calc(var(--m) - var(--s)*0.2885);
}

.container div:nth-child(odd) {
  background: green;
}

.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 120%;
  shape-outside: repeating-linear-gradient( #0000 0 calc(var(--f) - 3px), #000 0 var(--f));
}

<div class="main">
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Answer 1

您实际需要的是两行居中元素，其中第二行稍微移动。您不需要那个复杂的代码(顺便说一句，这是我编写的)。

我在第一个容器上使用了 15 个元素，在第二个容器上使用了 14 个元素(减去一个)。您可以添加任意数量的元素，但必须更新选择器才能正确为 9 个元素着色。

.container {
  overflow: hidden;
} 
.container > div {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.container > div > div {
  width: 80px;
  aspect-ratio: 0.866;
  flex-shrink: 0;
  clip-path: polygon(0 25%,50% 0,100% 25%,100% 75%,50% 100%,0 75%);
  background: black;
}
.container > div:last-child {
   transform: translateY(calc(6px - 25%));
}

.container > div > div:nth-child(6),
.container > div > div:nth-child(7),
.container > div > div:nth-child(8),
.container > div > div:nth-child(9),
.container > div > div:nth-child(10) {
  background: red;
}
.container > div:last-child > div:nth-child(10) {
  background: black;
}

<div class="container">
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>