I am attempting to make a tik-tak-toe board. [This](https://jsfiddle.net/tv_dinner123/762ahgdy/1/) is a JSFiddle for the code I have. I want to remove the white spaces between the rows to make it look like an actual tik-tak-toe board. How might I do this? Thank you for your help.

The code found in the JSFiddle is as follows:

```css
#squares {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  align-items: center;
}

#topLeft {
  border-bottom: solid;
  border-width: 10px;
}

#topCenter {
  border-left: solid;
  border-right: solid;
  border-bottom: solid;
  border-width: 10px;
}

#topRight {
  border-bottom: solid;
  border-width: 10px;
}

#middleLeft {
  border-top: solid;
  border-bottom: solid;
  border-width: 10px;
}

#middleCenter {
  border: solid;
  border-width: 10px;
}

#middleRight {
  border-top: solid;
  border-bottom: solid;
  border-width: 10px;
}

#bottomLeft {
  border-top: solid;
  border-width: 10px;
}

#bottomCenter {
  border-left: solid;
  border-top: solid;
  border-right: solid;
  border-width: 10px;
}

#bottomRight {
  border-top: solid;
  border-width: 10px;
}

.square {
  padding: 100px;
  border-width: 10px;
}
```

```html
<div id="squares">
  <p id="topLeft" class="square">sample</p>
  <p id="topCenter" class="square">sample</p>
  <p id="topRight" class="square">sample</p>
  <p id="middleLeft" class="square">sample</p>
  <p id="middleCenter" class="square">sample</p>
  <p id="middleRight" class="square">sample</p>
  <p id="bottomLeft" class="square">sample</p>
  <p id="bottomCenter" class="square">sample</p>
  <p id="bottomRight" class="square">sample</p>
</div>
```