Question

我正在尝试学习新的CSS网格显示模型，为此我试图获得一个六边形网格。（就像一个实验）

我有一个工作的例子，但它非常hacky。我正在使用 a 元素作为占位符来获取偶数行的位置，但整体而言系统并不太直观

＆＃13;

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);
}

＆＃13;

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

＆＃13;

获得这种结果的另一种方法是不那么苛刻，我只有真正需要的元素：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

但请注意，即使我有多行名为甚至，我也需要写

.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或其他东西

grid css - 偶数行上的位置元素

1 个答案: