Tic Tac Toe HTML CSS

1
votes

I was trying to create a basic tic tac toe game with React (but this question is just about CSS).

Initially, I wrote the following code for the grids:

App.js:

import React, { Component } from 'react';
import Square from './Square';

class App extends Component {
  render() {
    return (
      <div>
        <div><Square /><Square /><Square /></div>
        <div><Square /><Square /><Square /></div>
        <div><Square /><Square /><Square /></div>
      </div>
    )
  }
}

export default App;

where each Square is just an empty div (so I'll omit the Square.js code here), which has the following style:

{
  backgroundColor: "white",
  border: "black solid 2px",
  textAlign: "center",
  fontSize: "20px",
  width: "40px",
  height: "40px",
  margin: -1,
  display: "inline-block",
}

What happened was the Squares jumped up and down when rendering "X", "O" and the empty string like so:

enter image description here

Then I consulted React's official tutorial's code, where they did it differently in 2 ways:

  • In Square's CSS, the added "float: left" instead of my "display: inline-block"

  • They added another class "board-row" for each row, i.e. for each of the the div that wraps around the 3 Squares, with the following CSS:

    .board-row:after{
      clear: both;
      content: "";
      display: block;
}

    My question is:

  • Why wasn't my code working?

  • Why is the new code working?

I do have some initial thoughts: The new code has the squares of each row to float left, then it creates an empty element with "clear: both", which moves the empty element below the floated squares, forcing the next row of Squares to go below. (without "clear: both" all 9 squares will be on the same row). "display: block" also gives the empty element the ability to push the squares around.

Does it make sense? I also have trouble explaining what's the problem with the original code.

Normally I wouldn't care as long as the code is already working, but I'm trying to teach someone else React, so I want to be able to explain to them.

2
htmlcssreactjs

2 Answers

1
votes

Simply adding 

verticalAlign: "top",

to the intial style will be enough as per this blog. I tried it out in your intial style and it worked. You dont have to add .board-row:after

0
votes

Why is the new code working? Because it uses floating property to get the desired layout. You tried to achieve the same by using "display: inline-block" and that called an issue. I've found a great explanation of it here: Why is this inline-block element pushed downward?

Still, your solution is not wrong, just add overflow: hidden and line-height equal to font size to get text vertically centred. Also you've missed "px" in margin property

.square {
  background-color: white;
  border: black solid 2px;
  text-align: center;
  font-size: 20px;
  width: 40px;
  height: 40px;
  margin: -1px;
  display: inline-block;
  overflow: hidden;
  line-height: 40px;
}

https://codepen.io/Yulia_pi/pen/bMxxOo?editors=1100