css - 网格 css - 在偶数行上定位元素

Question

我正在尝试学习新的 CSS 网格显示模型，为此我尝试了一个六边形网格。 (作为实验)

我有一个有效的例子，但它很老套。我使用 a 元素作为占位符来根据需要获取偶数行的位置，但总体而言，系统不太直观

body {
  margin: 40px;
}
.wrapper {
  width: 470px;
  eight: 400px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 0px repeat(auto-fit, minmax(60px, 1fr));
  background-color: lightgreen;
  color: #444;
  grid-auto-flow: row dense;
  grid-auto-columns: 10px;
  transition: width 6s;
}
.wrapper:hover {
  width: 600px;
}
.box {
  background-color: coral;
  color: #fff;
  font-size: 150%;
}
.a {
  grid-column: 1;
  height: 0px;
}
.a:nth-child(even) {
  grid-column-end: span 2;
}
.b {
  margin-top: 28%;
  height: 0px;
  padding-bottom: 57.14%;
  grid-column-end: span 2;
  position: relative;
}
.b:before,
.b:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: coral;
}
.b:before {
  transform: rotate(60deg);
}
.b:after {
  transform: rotate(-60deg);
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box a">A</div>
  <div class="box a">A</div>
  <div class="box a">A</div>
  <div class="box a">A</div>
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
</div>

获得这个结果的另一种方法更简单，我只有真正需要的元素:

body {
  margin: 40px;
}
.wrapper {
  width: 470px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  grid-template-rows: repeat(4, [odd] auto [even] auto);
  background-color: lightgreen;
  grid-auto-flow: row dense;
  grid-auto-columns: 10px;
  transition: width 6s;
}
.wrapper:hover {
  width: 600px;
}
.box {
  background-color: coral;
  color: #fff;
  font-size: 150%;
}
.a {
  height: 0px;
}
.a:nth-child(1) {
  grid-row: even 1;
}
.a:nth-child(2) {
  grid-row: even 2;
}
.a:nth-child(3) {
  grid-row: even 3;
}
.a:nth-child(4) {
  grid-row: even 4;
}
.b {
  margin-top: 28%;
  height: 0px;
  padding-bottom: 57.14%;
  grid-column-end: span 2;
  position: relative;
}
.b:before,
.b:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: coral;
}
.b:before {
  transform: rotate(60deg);
}
.b:after {
  transform: rotate(-60deg);
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box a">A</div>
  <div class="box a">A</div>
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
  <div class="box b">B</div>
</div>

但是请注意，即使我有多个名为even 的行，我也需要写

.a:nth-child(1) {
  grid-row: even 1;
}
.a:nth-child(2) {
  grid-row: even 2;
}
.a:nth-child(3) {
  grid-row: even 3;
}
.a:nth-child(4) {
  grid-row: even 4;
}

我有些期待有一种方法可以自动执行此操作。

这似乎不是一个好的做事方式。我是否遗漏了一些可以得到同样结果的东西，但是以一种更干净的方式？

注意 我正在使用 Canary 来处理 - 我不确定此片段在其他浏览器上的显示方式。但目前我不关心这个，我只是在寻找一个概念性的解决方案。

Answer 1

遗憾的是不存在，但会有所帮助。 您需要对其进行预处理，比如用 php 或其他方式