Sudoku Grid Styling-Borders [CSS-Grid]

Question

I’ve created a sudoku puzzle and need a bit of help with some CSS to style it.

What I want to achieve using CSS is this...

What I currently have is this...

This is my 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;
}

And I'm using react to build this. So I've dynamically generated 81 elements (each with a class of element) using Array.map(). So there are 81 elements that essentially look like this...

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

So all I'm asking for is to have two equally horizontal border lines that would divide the whole board (with the class of container) into 3 equal parts thus resulting into 9 equal ninths (taking the already existing vertical border lines into consideration).

Clearly I can see that I need a bottom-border for elements numbers (container child numbers)[ (19,20,...,27) && (46,47,...,54) ].

I can possibly do something in my javascript, but I'm looking for a pure css solution. I've seen people recommend using tables and tr td and stuff like that but I'm taking this route. Any help?

Answer 1

Try this (same for y=5 and y=8):

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