I'm trying to make a sketchpad, which is a project from https://theodinproject.com. By default, the sketchpad has 16x16 grid of squares. The squares are expected to change when the user input the number of squares he wants while maintaining the dimensions of the grid container. I used CSS grid to do that.

The problem is when the user input the number squares, the grid do not fill the height of its container. They normally leave a blank space. I've tried different layout but CSS grid is the only that gets me close to the solution.

  button.addEventListener("click", () => {
      let num = prompt("Enter the number of squares", "0");
      let count = num * num;
      createDiv(count);

      container.setAttribute(`style`, 
       `grid-template-columns: repeat(${num}, 1fr);
        grid-template-rows: repeat(${num}, 1fr);`);
   });

Here is a pen of the project https://codepen.io/Shahidharis/pen/poLKzqj

CodePudding user response：

I've made a few changes to your code.

const grids = document.querySelector('.grid-wrapper')
const btn = document.querySelector('.btn')
let defCount = 5 //default

createDiv = (num) => {
  for(let i=0; i<num*num; i  ){
    let square = document.createElement("div")
    grids.append(square)
  }
}
grids.style.setProperty("--count", defCount)
createDiv(defCount)

btn.addEventListener("click", () => {
  grids.innerHTML = ''
  newCount = prompt("input a number")
  grids.style.setProperty("--count", newCount)
createDiv(newCount)
})

*, *:before, *:after{
  margin:0;
  box-sizing: border-box;
}

body{
  display:grid;
  place-content: center;
  gap: 0.5rem;
  min-height: 100vh;
  background: beige;
}

.grid-wrapper{
  padding: 0.5rem;
  background: orchid;
  border-radius: 0.3rem;
  width: 30rem;
  aspect-ratio: 1;
  display: grid;
  grid: repeat(var(--count), 1fr) / repeat(var(--count), 1fr);
  gap: 2px;
}

.grid-wrapper > div {
  background: azure;
}
.grid-wrapper > div:hover {
  background: lime;
}

<h1>Etch-A-Sketch</h1>
<button >Input count</button>
<div >
</div>