Is it possible to have the cells in a grid adjust and fill the available space when the size of the grid changes?

Question

Is it possible to have the cells in a grid adjust and fill the available space when the size of the grid changes?

Hey there! I'm currently working on creating a dynamic grid but I'm facing an issue with making the cells fill the space between them when the size of the grid changes.

Within my function that generates the grid, I take in the size as a parameter. However, I'm struggling to figure out what needs to be added to the grid-square class in order to achieve the desired effect of filling 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>

javascript html css

Answer 1

Answer №1

Here is how I approached it: Instead of using flex box, I switched to grid. Grid includes a property known as grid-template-columns, which allows you to specify the number of columns and their widths. The syntax for this property is

grid-template-columns: repeat(n, 1fr)

, where n represents the desired number of columns.

To dynamically set the column numbers in JavaScript, I utilized a CSS custom property (or a CSS variable) to define the column numbers. To assign values to the custom property, I used the element's style attribute to define it upon loading.

Take a look at the code snippet below:

// Retrieving 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) {
  // Creating 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);
  }
  // Addition made here
  container.style.cssText="--cols: "+size; 
}

createDivs(5);

* {
  box-sizing: border-box;
}
#container {
  /* Addition made here */
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  /* End of addition */
  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>

Answer 2

Here is how I approached it: Instead of using flex box, I switched to grid. Grid includes a property known as grid-template-columns, which allows you to specify the number of columns and their widths. The syntax for this property is

grid-template-columns: repeat(n, 1fr)

, where n represents the desired number of columns.

To dynamically set the column numbers in JavaScript, I utilized a CSS custom property (or a CSS variable) to define the column numbers. To assign values to the custom property, I used the element's style attribute to define it upon loading.

Take a look at the code snippet below:

// Retrieving 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) {
  // Creating 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);
  }
  // Addition made here
  container.style.cssText="--cols: "+size; 
}

createDivs(5);

* {
  box-sizing: border-box;
}
#container {
  /* Addition made here */
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  /* End of addition */
  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>

Answer 3

Answer №2

To solve the issue, the width was specified during the creation of the cells.

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

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

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

generateDivs(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>

Answer 4

To solve the issue, the width was specified during the creation of the cells.

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

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

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

generateDivs(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>

Is it possible to have the cells in a grid adjust and fill the available space when the size of the grid changes?

Answer №1

Answer №2

Similar questions

While utilizing Ajax with Spring, it is possible to send a JavaScript object and receive it as a custom object. However, there was an issue with

How should a successful post request be properly redirected in React?

Extract each line of text from the ul li tags at every level of the hierarchy with the help of

Tips for aligning two separate texts depending on if they appear on the same line or not

Arrange data into columns on a website

Is there a way to remove information with react and axios?

Evolutionary JavaScript Adaptations

Integrating md-chips md-separator-keys with md-autocomplete: A step-by-step guide

Utilizing Semantic HTML to Showcase a Product Comparison

Deciphering the Components of Web Applications: Express.js, Angular.js, and the MVC Puzzle

Implementing the row delete function in MUI DataGrid using JavaScript

Is there a way to swap out multiple characters within a string when using ng-repeat in AngularJS?

Do the "Save to Drive" buttons require manual cleaning?

Sending an array of properties to a child component

Mongoose Alert Utility Directive

What is the best method for accessing the properties of a JavaScript object based on input from a textbox?

Combine multiple arrays in JavaScript into a single array

What is the method for developing a Typescript-connected High-Order React Component with Redux?

Step by step guide on integrating current locations in Leaflet OpenStreetMap within an Angular application

Implementing Browser Back or Back button in AngularJS