Why do my grid is not placed in a container?

July 28, 2022

I created a 16 x 16 grid where I can etch a sketch on that grid. It’s working well. However, the problem now is that, my 16×16 grid is not hold in a container where I append it. Isn’t it supposed to contain in the container where I append it ? I want to display the grid in a way like it’s in a big squared box and empty on the inside. Only the most outer border is displayed. So that way, the user will know intuitively they’ll have to hover over the box to sketch.

let container = document.querySelector('.container');
let rows = document.getElementsByClassName('gridRow');
let columns = document.getElementsByClassName('gridColumn');

function createGrid(number) {
  makeRow(number);
  makeColumn(number);
}

function makeRow(numberOfRow) {
  for (let i = 0; i < numberOfRow; i++) {
    let row = document.createElement('div');
    container.appendChild(row);
    row.classList.add('gridRow');
  }
}

function makeColumn(numberOfColumn) {
  for (let i = 0; i < rows.length; i++) {
    for (let j = 0; j < numberOfColumn; j++) {
      let column = document.createElement('div');
      column.addEventListener('mouseenter', () => {
        column.classList.add('colored');
      });

      //  column.addEventListener('mouseleave', () => {
      //     column.classList.remove('colored');
      //  })

      rows[j].appendChild(column);
      column.classList.add('gridColumn');
    }
  }
}

createGrid(16);

@import url('https://fonts.googleapis.com/css2?family=Asap:wght@400;600;700&display=swap');

body {
  display: flex;
  flex: 1;
  height: 100%;
  flex-direction: column;
  background-color: beige;
  font-family: Asap, sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.header {
  display: flex;
  flex: 1;
  justify-content: center;
}

#setGridSize {
  display: inline-flex;
  justify-content: center;
  flex: 1;
  gap: 12px;
}

#guide {
  text-align: center;
  margin: 1px;
  font-family: Asap, sans-serif;
  color: red;
  font-size: 13px;
  ;
}

.container {
  display: flex;
  flex: 1;
  border: 2px solid grey;
  justify-content: center;
  align-content: center;
}

.gridColumn {
  display: inline-flex;
  flex: 1;
  border: 1px solid beige;
  margin: -2px 0px;
  width: 100%;
  height: 10%;
}

.colored {
  background: red;
}

.buttons {
  display: flex;
  flex: 1;
  gap: 20px;
}

<h1 class="header"> Let's sketch ! </h1>
<div id="setGridSize">
  <p> Grid size </p> <input type="text" placeholder="Size of Board" class="size-box">
  <button id="submit"> Submit </button>
</div>
<p id="guide"> Enter a number between 2 to 99</p>

<div class="container"></div>

<div class="buttons">
  <button id="white"> White </button>
  <button id="eraser"> Eraser </button>
  <button id="black"> Black </button>
  <button id="rainbow"> Rainbow </button>
  <button id="reset"> Reset</button>
</div>

>Solution :

Try it: change height to fixed value.

.gridColumn {
    display: inline-flex;
    flex: 1;
    border: 1px solid beige;
    margin: -2px 0px;
    width: 100%;
    height: 20px;
}

let container = document.querySelector('.container');
let rows = document.getElementsByClassName('gridRow');
let columns = document.getElementsByClassName('gridColumn');

function createGrid(number) {
  makeRow(number);
  makeColumn(number);
}

function makeRow(numberOfRow) {
  for (let i = 0; i < numberOfRow; i++) {
    let row = document.createElement('div');
    container.appendChild(row);
    row.classList.add('gridRow');
  }
}

function makeColumn(numberOfColumn) {
  for (let i = 0; i < rows.length; i++) {
    for (let j = 0; j < numberOfColumn; j++) {
      let column = document.createElement('div');
      column.addEventListener('mouseenter', () => {
        column.classList.add('colored');
      });

      //  column.addEventListener('mouseleave', () => {
      //     column.classList.remove('colored');
      //  })

      rows[j].appendChild(column);
      column.classList.add('gridColumn');
    }
  }
}

createGrid(16);

@import url('https://fonts.googleapis.com/css2?family=Asap:wght@400;600;700&display=swap');

body {
  display: flex;
  flex: 1;
  height: 100%;
  flex-direction: column;
  background-color: beige;
  font-family: Asap, sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.header {
  display: flex;
  flex: 1;
  justify-content: center;
}

#setGridSize {
  display: inline-flex;
  justify-content: center;
  flex: 1;
  gap: 12px;
}

#guide {
  text-align: center;
  margin: 1px;
  font-family: Asap, sans-serif;
  color: red;
  font-size: 13px;
  ;
}

.container {
  display: flex;
  flex: 1;
  border: 2px solid grey;
  justify-content: center;
  align-content: center;
}

.gridColumn {
  display: inline-flex;
  flex: 1;
  border: 1px solid beige;
  margin: -2px 0px;
  width: 100%;
  height: 20px;
}

.colored {
  background: red;
}

.buttons {
  display: flex;
  flex: 1;
  gap: 20px;
}

<h1 class="header"> Let's sketch ! </h1>
<div id="setGridSize">
  <p> Grid size </p> <input type="text" placeholder="Size of Board" class="size-box">
  <button id="submit"> Submit </button>
</div>
<p id="guide"> Enter a number between 2 to 99</p>

<div class="container"></div>

<div class="buttons">
  <button id="white"> White </button>
  <button id="eraser"> Eraser </button>
  <button id="black"> Black </button>
  <button id="rainbow"> Rainbow </button>
  <button id="reset"> Reset</button>
</div>