I am unable to properly align my TicTacToe items in my CSS grid, borders get messed up

Question

My TicTacToe grid is fine without justify-items:center; and align-items:center; (the items are not centered as I want, but my grid is OK).

But I want to center my items so the 'X' is right in the middle of the square so I add justify-items:center; and align-items:center; to my CSS grid, but when I do that my grid just gets weird, the borders gets messed up.

So how do I properly align my grid without messing with the borders?

#container {
  display: grid;
  grid-template: 100px 100px 100px / 100px 100px 100px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

.item {
  border-style: solid;
  border-width: thin;
  font-size: 80px;
}

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

<head>
  <meta charset="UTF-8">
  <title>TicTacToe</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <h1>A Tic-Tac-Toe game</h1>

  <div id="container">
    <a href="#" class="item" id="1">X</a>
    <a href="#" class="item" id="2">X</a>
    <a href="#" class="item" id="3">X</a>
    <a href="#" class="item" id="4">X</a>
    <a href="#" class="item" id="5">X</a>
    <a href="#" class="item" id="6">X</a>
    <a href="#" class="item" id="7">X</a>
    <a href="#" class="item" id="8">X</a>
    <a href="#" class="item" id="9">X</a>
  </div>

  <script type="text/javascript" src="script.js"></script>
</body>

</html>

When you apply the centering properties to the grid container, that centers the *grid item*. That's what you're seeing. You actually want to center the *content of the grid item*, so apply the centering properties to the item, not the container. https://jsfiddle.net/csvg2f12/ — Michael Benjamin, May 14 '18 at 19:22

score 0 · Answer 1 · answered May 14 '18 at 18:52

Just added text-align: -webkit-center; and removed two other classes.

hope this is what you are looking for.

#container {
  display: grid;
  grid-template: 100px 100px 100px / 100px 100px 100px;
  justify-content: center;
  /*justify-items: center;
  align-items: center;  -- not needed */
 text-align: -webkit-center;
}

.item {
  border-style: solid;
  border-width: thin;
  font-size: 80px;
}

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

<head>
  <meta charset="UTF-8">
  <title>TicTacToe</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <h1>A Tic-Tac-Toe game</h1>

  <div id="container">
    <a href="#" class="item" id="1">X</a>
    <a href="#" class="item" id="2">X</a>
    <a href="#" class="item" id="3">X</a>
    <a href="#" class="item" id="4">X</a>
    <a href="#" class="item" id="5">X</a>
    <a href="#" class="item" id="6">X</a>
    <a href="#" class="item" id="7">X</a>
    <a href="#" class="item" id="8">X</a>
    <a href="#" class="item" id="9">X</a>
  </div>

  <script type="text/javascript" src="script.js"></script>
</body>

</html>

Belder · Answer 2 · 2018-05-14T19:26:30.693

I believe that you are applying justify-content: center & align-items: center in the wrong place. You want that applied to the .item class. Applying those to the #container will center the entire grid area but not the contents inside each grid cell. The solution below is one way to achieve what you are after.

Applying text-align: center to the grid will center the text-content in each cell horizontally, but not vertically. It the grid-cell dimensions were to change to say grid-template: 150px 150px 150px / 400px 400px 400px; you will see that the below approach will make sure the text-content is always centered appropriately.

#container {
  display: grid;  
  grid-template: 100px 100px 100px / 100px 100px 100px;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-width: thin;
  font-size: 80px;
  text-decoration: none;
}

<h1>A Tic-Tac-Toe game</h1>    

<div id="container">
  <a href="#" class="item" id="1">X</a>
  <a href="#" class="item" id="2">X</a>    
  <a href="#" class="item" id="3">X</a>
  <a href="#" class="item" id="4">X</a>   
  <a href="#" class="item" id="5">X</a>
  <a href="#" class="item" id="6">X</a>                   
  <a href="#" class="item" id="7">X</a>
  <a href="#" class="item" id="8">X</a>
  <a href="#" class="item" id="9">X</a>
</div>

I am unable to properly align my TicTacToe items in my CSS grid, borders get messed up

2 Answers2