Map Over a 2-Dimensional Array to Create a Game Grid in React with CSS Grid
Our tic-tac-toe UI has to display our grid data. Using CSS Grid to do so is :chefs_kiss:. We'll create Grid and Cell components to handle our data. The Grid component will map our rows and columns and use the CSS Grid layout engine to correctly place them. We'll make our grid generically handle any amount of rows and columns we would throw at it. We'll use a simple trick with the grid-gap property to easily create the crossing lines of a tic-tac-toe game.
The CSS for the grid layout is not very clear for me, but the funny thing is that its not even working the same way in the "View code for this lesson" and on my local either. I know the focus of the course is not CSS but please clarify a bit, because the one in the video and the example code looks different already.
Please ignore my comment :) It does look the same in the later lectures, just still not clear how this grid trick works.
The parent div (with display: grid) has a dark background and has a gridGap set to 2px. This means that there will be a 2px gap between all children of the grid.
Then we give it children, the Cells, with a white background. When they sit on top of the dark parent, the only thing that we see is the gaps of the parent.
Honestly, the best metaphor I can think of is an ice cube tray. The cells are the ice cubes, and the "lines" we see are the gaps created by the tray between each cube.