Etch a sketch grid resizing


#1

Hello, I have mostly completed the etch a sketch project however whenever the grid resizes it wont stay within the size of the container. I have tried setting a div inside the container and setting its width and height to 100%. I also have tried setting the div width and height by dividing the container pixels by the size of the grid however when i do this the grid becomes messed up. Below is the code I wrote. Thank you for the help.

https://codepen.io/mzhu3703/pen/dyPvRyz?editors=1111


#2

Hi mzhu3703!
I think that perhaps one of the most immediate issues with your approach is the following two lines:

div.style.width = 500/size;
div.style.height = 500/size;

DOM Elements do not like having their style properties set to numbers without units! This means that these two lines will do nothing to help change your style. To fix that problem, replace those lines with these two lines:

div.style.width = 500/size + "px";
div.style.height = 500/size + "px";

Additionally, you are setting the ID of each square to the same value with the following line.

div.setAttribue("id","square");

This is definitely not a good idea! Browsers prefer element IDs to be unique. What you want there is to add that to your class list, or in other words change this line:

div.className = "gridElement";

to this:

div.className = "square gridElement";

However, these are small changes that likely won’t immediately help you fix your problem. I don’t want to give away the answer, but I would like to help nudge you towards it.
Right now, you are creating rows and columns by creating x number of p elements that contain x number of div elements like so:

<p>
  <div></div>
  <div></div>
  <div></div>
</p>
<p>
  <div></div>
  <div></div>
  <div></div>
</p>
<p>
  <div></div>
  <div></div>
  <div></div>
</p>

This works (although I’d recommend changing the p elements to divs), however there is a way to achieve the same effect without the p elements.
Look into CSS Grid (specifically the grid-template-columns and grid-template-rows properties) as well as CSS Custom Variables, which can be set via javascript with the following line of code

document.documentElement.style.setProperty("--variable", value);

Hope this helps!
Taylor