Question 182940 in Html Question posted in
Some basic documentation can be found here.

Html – Tic Tac Toe Board

I am doing The Odin Project right now and I am on the Tic Tac Toe project. I am sure this will be very difficult for me but I am looking forward to it. However, I am here to ask for help with setting the board up in HTML and CSS. How would I even go about this?

<div class="board" id="upperLeft"></div>
<div class="board" id="upperCenter"></div>
<div class="board" id="upperRight"></div>
<div class="board" id="middleLeft"></div>
<div class="board" id="middleCenter"></div>
<div class="board" id=middleRight></div>
<div class="board" id="lowerLeft"></div>
<div class="board" id="lowerMiddle"></div>
<div class="board" id="lowerRight"></div>
Tags:

2

Answers


  1. 0

    You can use grid; this way, cells can be direct children of the board:

    <div id="board">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

    #board {
  display: grid;

  /* Make three rows of equal height */
  grid-template-rows: repeat(3, 1fr);
  /* Make three columns of equal width */
  grid-template-columns: repeat(3, 1fr);

  /* Controls the gap between cells */
  gap: 1em;

  /* A size of your choice */
  height: 400px;
  /* Make it a perfect square */
  aspect-ratio: 1 / 1;
}

    Try it:

    #board {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  margin: 2em auto;
  height: 400px;
  aspect-ratio: 1 / 1;
}

.cell {
  background: #ddd;
}
    <div id="board">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>
    Login or Signup to reply.
  2. 0

    You can use CSS grids to lay it out.

    .board {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  
  display: grid;
  grid-template-columns: auto auto auto;
}

.box{
  border: 3px solid;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
    <div class="board">
  <div class="box" id="upperLeft"></div>
  <div class="box" id="upperCenter"></div>
  <div class="box" id="upperRight"></div>
  <div class="box" id="middleLeft"></div>
  <div class="box" id="middleCenter"></div>
  <div class="box" id="middleRight"></div>
  <div class="box" id="bottomLeft"></div>
  <div class="box" id="bottomCenter"></div>
  <div class="box" id="bottomRight"></div>
</div>

    Also, you can make everything a member of one class by including it in one big div like I did with the board 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search