An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
May 25, 2021 03:01 pm GMT
Original Link: https://dev.to/pat_the99/how-to-remove-outside-borders-of-a-3x3-grid-using-css-e-g-tic-tac-toe-ui-4ao8
How to remove outside borders of a 3x3 grid using CSS, e.g. Tic-Tac-Toe UI
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;}
For the last column,
.board div:nth-child(3n) { border-right: none;}
For the first column,
.board-item:nth-child(3n - 2) { border-left: none;}
For the last row,
.board-item:nth-child(n + 7) { border-bottom: none;}
And that is it. Thanks for reading. Check my tic-tac-toe game here.
Original Link: https://dev.to/pat_the99/how-to-remove-outside-borders-of-a-3x3-grid-using-css-e-g-tic-tac-toe-ui-4ao8
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To