数独网格样式-边框 [CSS-Grid]

Question

我创建了一个数独游戏，需要一些 CSS 帮助来设置它的样式。

我想用 CSS 实现的是这样的......

我目前拥有的是这个……

这是我的 CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.header {
  text-align: center;
}
.container {
  box-sizing: content-box;
  border: 3px solid black;
  border-right: 2px solid black;
  margin: auto;
  width: 540px;
  height: 540px;
  display: grid;
  grid-template: repeat(9, 60px) / repeat(9, 60px);
  background-color: blanchedalmond;
}
.element {
  width: 60px;
  height: 60px;
  background-color: grey;
  border: 1px solid black;
}
.element:nth-child(3n) {
  border-right: 2px solid black;
}

我正在使用 react 来构建它。所以我使用 Array.map() 动态生成了 81 个元素（每个元素都有一个元素类）。 所以有 81 个元素基本上看起来像这样......

<div class="container">
<div class="element" data-x="0" data-y="0" data-section="0"></div>
<div class="element" data-x="1" data-y="0" data-section="0"></div>
<div class="element" data-x="2" data-y="0" data-section="0"></div>
.
.
.
<div class="element" data-x="7" data-y="8" data-section="8"></div>
<div class="element" data-x="8" data-y="8" data-section="8"></div>
</div>

所以我所要求的只是有两条相等的水平边界线，将整个板（与容器类）分成 3 个相等的部分，从而产生 9 个相等的九分之一（将已经存在的垂直边界线放入考虑）。

很明显，我可以看到我需要元素编号（容器子编号）[ (19,20,...,27) && (46,47,...,54) ] 的底部边框。

我可以在我的 javascript 中做一些事情，但我正在寻找一个纯 css 解决方案。我见过人们推荐使用表格和 tr td 之类的东西，但我正在走这条路。 有什么帮助吗？

Answer 1

试试这个（y=5 和 y=8 相同）：

.element[data-y="2"] {
border-bottom: 2px solid black;
}