CSS nightmare pt 2--Grid properties

HTML-CSS
1

So i’m trying to use CSS grid on my tic-tac-toe project to have another thing to learn. I’ve run into some problems, though.

Problem 1:
I can’t get the X or O to be centered either vertically or horizontally.

I’ve tried all sorts of combos of justify-self, align-self, justify-items, align-items, margin: auto, etc. Maybe i’m just not doing it right, or maybe something in my grid code precludes the use of those properties. Any help?

Here’s the codepen, but I think all the pertinent code is below.
HTML

<div class="container" id="board">
            <div class="one" id = "1"></div>
            <div class="one" id = "2"></div>
            <div class="one" id = "3"></div>
            <div class="one" id = "4"></div>
            <div class="one" id = "5"></div>
            <div class="one" id = "6"></div>
            <div class="one" id = "7"></div>
            <div class="one" id = "8"></div>
            <div class="one" id = "9"></div>
 </div>

CSS

.container{
  height: 400px;
  width: 390px;
  background: yellow;
  border-radius: 3%;
  margin: 30px auto 20px auto;
}

#board{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3,1fr);
}
2

I am surprised you didn’t try

.one{
  text-align: center;
}

To get the vertical alignment add <span style="vertical-align:middle"></span> around the X or O

5

fair enough, @camperextraordinaire . You found the classic unbeatable position–controlling 3 corners early. It’s impossible for anybody to prevent a win in that situation, and there’s no way for the computer to prevent that set-up without providing other obvious win set-ups on the way there.

6

Thanks for the suggestions @camperextraordinaire and @JohnnyBizzel . I’ll give these a shot when I’ve got some time on my hands!

7

The computer’s 2nd move should be the computer’s 3rd move in the above example.

8

fixed, @camperextraordinaire.

should now be unbeatable.

10

Fixed and fixed. Although, now i’m wondering if my js is excessively long. Feels like i’m having to write too much for these particular exceptions.

12

Did some major hard-coding, but now i feel pretty confident the computer can’t be defeated. (Tried at least 14 different first-2-move combinations).