数独网格样式边框 [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 个元素（每个元素都有一个 class 元素）。所以有 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>

所以我所要求的就是有两条相等的水平边界线，将整个板（容器的 class）分成 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;
}

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

Sudoku Grid Styling-Borders [CSS-Grid]

css

border

sudoku

reactjs

css-grid