I want to make a sudoku table I have one row, I need three rows in hmtl and css. How to I get tables on right and left

Issue

I want to make a sudoku table I have one row as shown in pic 1, I need three rows in HTML and CSS, like pic 2. How could I achieve this. Take a look at pictures below. I would I need to make rows for the body of my CSS or is there another way?

I have this:
pic 1
I want this:
pic 2

html file (it is repeats 3 times):

<div class="game">
    <div id = "table"class="digits">
        <!-- table 1 -->
        <!-- column 0 -->
      <input maxlength="1" type="number" min="1" max="4" id ="c0r0" onchange="get_value(event, id)"></input>

      <input maxlength="1" type="number" min="1" max="4" id ="c0r1" onchange="get_value(event, id)"></input>

      <input maxlength="1" type="number" min="1" max="4" id ="c0r2" onchange="get_value(event, id)"></input>

        <!-- table 1 -->
        <!-- column 1 -->
      <input maxlength="1" type="number" min="1" max="4" id ="c1r0" onchange="get_value(event, id)"></input>

      <input maxlength="1" type="number" min="1" max="4" id ="c1r1" onchange="get_value(event, id)"></input>

      <input maxlength="1" type="number" min="1" max="4" id ="c1r2" onchange="get_value(event, id)"></input>

        <!-- table 1 -->
        <!-- column 2 -->
      <input maxlength="1" type="number" min="1" max="4" id ="c2r0" onchange="get_value(event, id)"></input>

      <input maxlength="1" type="number" min="1" max="4" id ="c2r1" onchange="get_value(event, id)"></input>

      <input maxlength="1" type="number" min="1" max="4" id ="c2r2" onchange="get_value(event, id)"></input>
      </div>

CSS file:

body {
  margin: 2;
  height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  overflow: hidden;
}
.game .digits {
  box-sizing: border-box;
  width: 190px;
  height: 190px;
  padding: 5px;
  border: 7px solid rgb(0, 0, 0);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}
.game .digits span {
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  background-color: silver;
  font-size: 30px;
  font-family: sans-serif;
  text-align: center;
  line-height: 2.5em;
  color: rgb(0, 0, 0);
  position: relative;
}
.game .digits input {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  background-color: silver;
  font-size: 20px;
  font-family: sans-serif;
  text-align: center;
  line-height: 2.5em;
  color: rgb(0, 0, 0);
  position: relative;
}

I have tried to add more tables but when I do tables keep coming below the other tables. I need tables on the side.

Solution

You can use css Grid.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #aaa;
  padding: 10px;
}
.grid-item {
  background-color: rgba(0,0,0,1);
  border: 5px solid #fff;
  padding: 20px;
}
 <div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div> 

FULL EXAMPLE

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #aaa;
  padding: 10px;
}

.game {
  background-color: rgba(0, 0, 0, 1);
  border: 5px solid #fff;
  padding: 5px;
}

.game .digits {
  box-sizing: border-box;
  width: 190px;
  height: 190px;
  padding: 5px;
  border: 7px solid rgb(0, 0, 0);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}

.game .digits span {
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  background-color: silver;
  font-size: 30px;
  font-family: sans-serif;
  text-align: center;
  line-height: 2.5em;
  color: rgb(0, 0, 0);
  position: relative;
}

.game .digits input {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  background-color: silver;
  font-size: 20px;
  font-family: sans-serif;
  text-align: center;
  line-height: 2.5em;
  color: rgb(0, 0, 0);
  position: relative;
}
<div class="grid-container">

  <div class="game">
    <div id="table1" class="digits">
      <input maxlength="1" type="number" min="1" max="4" id="c0r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r2" onchange="get_value(event, id)"></input>
    </div>
  </div>

  <div class="game">
    <div id="table2" class="digits">
      <input maxlength="1" type="number" min="1" max="4" id="c0r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r2" onchange="get_value(event, id)"></input>
    </div>
  </div>

  <div class="game">
    <div id="table3" class="digits">
      <input maxlength="1" type="number" min="1" max="4" id="c0r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r2" onchange="get_value(event, id)"></input>
    </div>
  </div>

  <div class="game">
    <div id="table4" class="digits">
      <input maxlength="1" type="number" min="1" max="4" id="c0r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r2" onchange="get_value(event, id)"></input>
    </div>
  </div>

  <div class="game">
    <div id="table5" class="digits">
      <input maxlength="1" type="number" min="1" max="4" id="c0r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r2" onchange="get_value(event, id)"></input>
    </div>
  </div>

  <div class="game">
    <div id="table6" class="digits">
      <input maxlength="1" type="number" min="1" max="4" id="c0r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r2" onchange="get_value(event, id)"></input>
    </div>
  </div>

  <div class="game">
    <div id="table7" class="digits">
      <input maxlength="1" type="number" min="1" max="4" id="c0r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r2" onchange="get_value(event, id)"></input>
    </div>
  </div>

  <div class="game">
    <div id="table8" class="digits">
      <input maxlength="1" type="number" min="1" max="4" id="c0r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r2" onchange="get_value(event, id)"></input>
    </div>
  </div>

  <div class="game">
    <div id="table9" class="digits">
      <input maxlength="1" type="number" min="1" max="4" id="c0r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c0r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c1r2" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r0" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r1" onchange="get_value(event, id)"></input>
      <input maxlength="1" type="number" min="1" max="4" id="c2r2" onchange="get_value(event, id)"></input>
    </div>
  </div>

</div>

Answered By – DreamTeK

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.