How to prevent row resizing after enter data-CodePudding

I am creating a tic tac toe game. Where in initial state I have no data in any button. But whenever any data is entered. The board row resized and if I click all button they go in normal position.

Here I didn't provide all code. Just providing the main problem section. How can I fix it that they will stay all time same position, although there had any value or have one.

.board {
    
}
.board button{
    width: 20px;
    height: 20px;
    padding: 20px;
    border: 1px solid #2d3e50;
    background-color: #34495e;
}

<div>
    <div class='board'>
      <button>X</button>
      <button></button>
      <button></button>
    </div>
    <div class='board'>
      <button></button>
      <button></button>
      <button></button>
    </div>
    <div class='board'>
      <button></button>
      <button></button>
      <button></button>
    </div>
</div>

CodePudding user response：

Here you go...

.grid {
  display: grid;
  grid-template-columns: repeat(3, 60px);
  grid-template-rows: repeat(3, 60px);
  grid-gap: 5px;
}

.cell {
  justify-content: center;
  align-items: center;
  display: flex;
  font-family: Arial;
  font-size: 3rem;
  font-weight: bold;
  border: 1px solid #2d3e50;
  background-color: #34495e;
}

<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>

</head>

<body>

  <div class="grid">
    <button class="cell" id="1">X</button>
    <button class="cell" id="2"></button>
    <button class="cell" id="3"></button>
    <button class="cell" id="4"></button>
    <button class="cell" id="5"></button>
    <button class="cell" id="6"></button>
    <button class="cell" id="7"></button>
    <button class="cell" id="8"></button>
    <button class="cell" id="9"></button>
  </div>

</body>

</html>

CodePudding user response：

You can try using the display: flex in your container in order to always keep your buttons centered and together. Flex is always useful

.board {
    display:flex;
    justify-content:center;
    align-items:center;
}
.board button{
    width: 20px;
    height: 20px;
    padding: 20px;
    border: 1px solid #2d3e50;
    background-color: #34495e;
}

<div>
    <div class='board'>
      <button>X</button>
      <button>s</button>
      <button></button>
    </div>
    <div class='board'>
      <button>s</button>
      <button></button>
      <button></button>
    </div>
    <div class='board'>
      <button></button>
      <button></button>
      <button></button>
    </div>
</div>