Is there a way to make the cells of a grid fill in the space when the grid's size changes?-CodePudding

I'm making a grid and I'm not sure how to make the cells fill the space between them when the grid size changes.

I have a function that generates a grid and receives size as a parameter.

What should be added to the grid-square class to make the cells fill the entire space?

//get the grid div
const container = document.querySelector("#container");

function changeColor(e) {
  const hoverColor = Math.floor(Math.random() * 16777215).toString(16);
  e.target.style.backgroundColor = "#"   hoverColor;
}

function createDivs(size) {
  //generate grid elements
  for (let i = 0; i < size * size; i  ) {
    const newDiv = document.createElement("div");
    newDiv.classList.add("grid-square");
    newDiv.addEventListener("mouseover", changeColor);
    container.appendChild(newDiv);
  }
}

createDivs(2);

* {
  box-sizing: border-box;
}
#container {
  display: flex;
  background-color: rgba(49, 49, 49, 0.281);
  width: 50vw;
  height: 50vh;
  flex-wrap: wrap;
}

.grid-square {
  background-color: white;

  width: 50%;
  aspect-ratio: 1/1;
}

.grid-square:hover {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Etch a Sketck</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

CodePudding user response：

So this is the way I did it. I changed from flex box to grid. Grid has a property called grid-template-columns that defines how many columns you have and how wide each one is. The syntax here is grid-template-columns: repeat(n, 1fr) where n is the number of columns you want.

In order to set the column numbers in javascript, I've used a css custom property (also called a css variable) to define the column numbers. To set the custom property itself I've set the element's style attribute to define that property on load.

Have a look below:

//get the grid div
const container = document.querySelector("#container");

function changeColor(e) {
  const hoverColor = Math.floor(Math.random() * 16777215).toString(16);
  e.target.style.backgroundColor = "#"   hoverColor;
}

function createDivs(size) {
  //generate grid elements
  for (let i = 0; i < size * size; i  ) {
    const newDiv = document.createElement("div");
    newDiv.classList.add("grid-square");
    newDiv.addEventListener("mouseover", changeColor);
    container.appendChild(newDiv);
  }
  // Added this
  container.style.cssText="--cols: " size; 
}

createDivs(5);

* {
  box-sizing: border-box;
}
#container {
  /* added this */
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  /* end of added css */
  background-color: rgba(49, 49, 49, 0.281);
  width: 50vw;
  height: 50vh;
  flex-wrap: wrap;
}

.grid-square {
  background-color: white;
  aspect-ratio: 1/1;
}

.grid-square:hover {
  cursor: pointer;
}

<div id="container"></div>

CodePudding user response：

The solution was to set the width when creating the cells.

//get the grid div
const container = document.querySelector("#container");

function changeColor(e) {
  const hoverColor = Math.floor(Math.random() * 16777215).toString(16);
  e.target.style.backgroundColor = "#"   hoverColor;
}

function createDivs(size) {
  //generate grid elements
  for (let i = 0; i < size * size; i  ) {
    const newDiv = document.createElement("div");
    newDiv.classList.add("grid-square");
    newDiv.addEventListener("mouseover", changeColor);
    //Setting the width
    newDiv.style.width = 100 / size   "%";
    container.appendChild(newDiv);
  }
}

createDivs(6);

* {
  box-sizing: border-box;
}
#container {
  display: flex;
  background-color: rgba(49, 49, 49, 0.281);
  width: 50vw;
  height: 50vh;
  flex-wrap: wrap;
}

.grid-square {
  background-color: white;
  width: 50%;
  aspect-ratio: 1/1;
}

.grid-square:hover {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Etch a Sketck</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>