Html 使用无限数量的元素创建特定的CSS网格

发布于01月27日

我try 创建一个CSS网格，它将具有特定的列(逐行)，我可以在其中添加任意数量的div，这些div将以特定的顺序添加:

[1] [2] [3]
[4] [5]
[6] [7] [8]
[9] [10]
etc

但我也希望能够访问每个"小组"的div(1-3，5-8，4-5，9-10等)，以编辑他们的"内部"通过css

任何帮助都将不胜感激.

我try 使用grid-template-columns，但我所实现的只是通过repeat(3, 1fr)连续显示三个元素

推荐答案

考虑一个6列配置:

.container {
  display: grid;
  grid-template-columns:repeat(6,1fr);
  gap: 10px;
}

.container > div {
  grid-column: span 2;
  background: red;
  height: 50px;
}
.container > div:is(:nth-child(5n + 4),:nth-child(5n)) {
  grid-column: span 3;
  background: blue;
}

<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>