23

How to remove outside borders of a 3x3 grid using CSS, e.g. Tic-Tac-Toe UI

 2 years ago
source link: https://dev.to/pat_the99/how-to-remove-outside-borders-of-a-3x3-grid-using-css-e-g-tic-tac-toe-ui-4ao8
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Cover image for How to remove outside borders of a 3x3 grid using CSS, e.g. Tic-Tac-Toe UI

How to remove outside borders of a 3x3 grid using CSS, e.g. Tic-Tac-Toe UI

May 25

・1 min read

I was trying to achieve this kind of UI when I tried implementing the Tic-tac-toe game (I know it looks easy to some XD)
The challenge was how to properly select the first and last column, as well as the first and last row. I seriously did not want to manually remove the borders of the eight cells.

The data structure of my tic-tac-toe grid is not two-dimensional, but one, so I can easily do the tricks below. Think of my counting as this :
0 | 1 | 2
3 | 4 | 5
6 | 7 | 8

For the first row, the top border should be removed, thus:

.board-item:nth-child(-n + 3) {
    border-top: none;
}
Enter fullscreen modeExit fullscreen mode

For the last column,

.board div:nth-child(3n) {
    border-right: none;
}
Enter fullscreen modeExit fullscreen mode

For the first column,

.board-item:nth-child(3n  - 2) {
    border-left: none;
}
Enter fullscreen modeExit fullscreen mode

For the last row,

.board-item:nth-child(n + 7) {
    border-bottom: none;
}
Enter fullscreen modeExit fullscreen mode

And that is it. Thanks for reading. Check my tic-tac-toe game here.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK