Click here to Skip to main content
15,881,938 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.

What I have tried:

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
Posted
Updated 7-Aug-22 5:45am
v2
Comments
Member 15627495 8-Aug-22 22:50pm    
hello !

did you try : "position:relative;" ? as css statement.

this parameters make one html tag belonging to its parent, and so its coordinates ( left ; top ; witdh ... ) too

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900