CSS nightmare pt 2--Grid properties

CSS nightmare pt 2--Grid properties
0.0 0

#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


#3

The following is kind of a hack and would not be responsive, but it works for your current design without having to add any further elements.

.one{
  border: blue solid 1px;
  font-size: 80px;
  text-align: center;
  height: 131.3px;
  line-height: 131.3px;
}

#4

FYI - On a side note, your solution does not always result in a tie or win for computer. Below, is how a game played out and I won. You may not be completely finished with your logic, but I thought I would share just in case you thought your computer was not beatable.


#5

fair enough, @randelldawson . 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 @randelldawson 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, @randelldawson.

should now be unbeatable.


#9

Now you have two new problems.

  1. If I am X and my first move is in the center square and the computer places the top middle square. If my next move is the bottom middle square, on a few of the games I played, the computer would not make it’s 2nd move and the game was at a standstill.

  2. Also, I can beat the computer with the following:


#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.


#11

I suggest you test your game at many different starting positions and different moves to see if you can find any more issues. Each time I have tested your game, I found these issues within 2-3 games.

I just played your game twice and won again.


#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).