Create dynamic cells for CSS grid using JavaScript

Question

Create dynamic cells for CSS grid using JavaScript

I have been manually generating grid cells in a specific pattern by copying and adjusting <div> elements. Although this method works, I am interested in creating an algorithm that can automatically generate the desired layout. The left box in the example below illustrates the dynamic calculation I am aiming for.

function createGridCells(){
let cells = '';
  for(let a = 1; a <= 10; a++){
    for(let b = 1; b <= a; b++){
        cells += `<div style="background:#fd8362; grid-area: ${a % b} / ${a % b} / ${a % b} / ${a % b}">
        ${b}
      </div>`
    }
  }
  return cells;
}

document.getElementById("grid-body-algorithm").innerHTML = createGridCells();

#grid-body,
#grid-body-algorithm {
    float:left;
    margin-right:30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    text-align: center;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    justify-content: center;
    align-content: end;
    border-radius: 5px;
    width:150px;
    height:150px;
    color:#444444;
    padding:1px;
}

#grid-body > *,
#grid-body-algorithm > *{
  border:1px solid white;
}

<div id="grid-body">
  <div style="background:#fd8362; grid-area: 1 / 1 / 1 / 1">1</div>

  <div style="background:#ffad97; grid-area: 2 / 1 / 2 / 1">1</div>
  <div style="background:#ffad97; grid-area: 1 / 2 / 1 / 2">2</div>

  <div style="background:#ffded6; grid-area: 3 / 1 / 3 / 1">1</div>
  <div style="background:#ffded6; grid-area: 2 / 2 / 2 / 2">2</div>
  <div style="background:#ffded6; grid-area: 1 / 3 / 1 / 3">3</div>

  <div style="background:#fff0ec; grid-area: 4 / 1 / 4 / 1">1</div>
  <div style="background:#fff0ec; grid-area: 3 / 2 / 3 / 2">2</div>
  <div style="background:#fff0ec; grid-area: 2 / 3 / 2 / 3">3</div>
  <div style="background:#fff0ec; grid-area: 1 / 4 / 2 / 4">4</div>
</div>

<div id="grid-body-algorithm">
  
</div>

javascript html css algorithm

Answer 1

Answer №1

By examining the desired output, it is evident that the color of a cell is determined by the taxicab distance from the top-left corner, while the column number dictates the text content of the cell.

When implementing the inner loop, it is important to set a maximum limit on the taxicab distance. This limit can be customized as a parameter in your function. In this specific example, the maximum distance is set at 3 (which means cells up to 3 taxicab steps away from the top-left cell are considered).

Moreover, the color intensity seems to decrease with an increase in taxicab distance. To achieve this effect, adjustments can be made to the alpha component of the background color using the RGBA model. The alpha value ranges between 0 and 1.

Instead of generating HTML directly, I chose to create a document fragment for more controlled manipulation of cell attributes using JavaScript syntax, resulting in a more object-oriented approach.

The CSS styles provided have not been altered in this implementation.

In addition to the existing code, I have introduced an input field that enables users to specify the maximum taxicab distance:

function calcCells(maxDistance) {
  const fragment = document.createDocumentFragment();
  for (let row = 1; row <= 5; row++) {
    // row + col - 2 represents the taxicab distance from the top-left corner
    for (let col = 1, distance = row - 1; distance <= maxDistance && col <= 5; col++, distance++) { 
        const cell = document.createElement("div");
        // Adjust background transparency based on the calculated alpha value
        cell.style.background = `rgba(240,120,80,${1 - (distance + 0.5) / (maxDistance + 1)})`;
        cell.style.gridArea = [row, col, row, col].join(" / ");
        cell.textContent = col;
        fragment.appendChild(cell);
    }
  }
  return fragment;
}

const inputDistance = document.querySelector("input");
const outputGrid = document.getElementById("grid-body-algorithm");

function refresh() {
    const maxDistance = +inputDistance.value;
    outputGrid.innerHTML = ""; // Clear previous content
    outputGrid.appendChild(calcCells(maxDistance));
}

inputDistance.addEventListener("click", refresh);
refresh();

#grid-body,
#grid-body-algorithm {
    float:left;
    margin-right:30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    text-align: center;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    justify-content: center;
    align-content: end;
    border-radius: 5px;
    width:150px;
    height:150px;
    color:#444444;
    padding:1px;
}

#grid-body > *,
#grid-body-algorithm > *{
  border:1px solid white;
}

<div id="grid-body-algorithm"></div>
distance: <input type="number" value="3" min="0" max="8">

Answer 2

By examining the desired output, it is evident that the color of a cell is determined by the taxicab distance from the top-left corner, while the column number dictates the text content of the cell.

When implementing the inner loop, it is important to set a maximum limit on the taxicab distance. This limit can be customized as a parameter in your function. In this specific example, the maximum distance is set at 3 (which means cells up to 3 taxicab steps away from the top-left cell are considered).

Moreover, the color intensity seems to decrease with an increase in taxicab distance. To achieve this effect, adjustments can be made to the alpha component of the background color using the RGBA model. The alpha value ranges between 0 and 1.

Instead of generating HTML directly, I chose to create a document fragment for more controlled manipulation of cell attributes using JavaScript syntax, resulting in a more object-oriented approach.

The CSS styles provided have not been altered in this implementation.

In addition to the existing code, I have introduced an input field that enables users to specify the maximum taxicab distance:

function calcCells(maxDistance) {
  const fragment = document.createDocumentFragment();
  for (let row = 1; row <= 5; row++) {
    // row + col - 2 represents the taxicab distance from the top-left corner
    for (let col = 1, distance = row - 1; distance <= maxDistance && col <= 5; col++, distance++) { 
        const cell = document.createElement("div");
        // Adjust background transparency based on the calculated alpha value
        cell.style.background = `rgba(240,120,80,${1 - (distance + 0.5) / (maxDistance + 1)})`;
        cell.style.gridArea = [row, col, row, col].join(" / ");
        cell.textContent = col;
        fragment.appendChild(cell);
    }
  }
  return fragment;
}

const inputDistance = document.querySelector("input");
const outputGrid = document.getElementById("grid-body-algorithm");

function refresh() {
    const maxDistance = +inputDistance.value;
    outputGrid.innerHTML = ""; // Clear previous content
    outputGrid.appendChild(calcCells(maxDistance));
}

inputDistance.addEventListener("click", refresh);
refresh();

#grid-body,
#grid-body-algorithm {
    float:left;
    margin-right:30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    text-align: center;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    justify-content: center;
    align-content: end;
    border-radius: 5px;
    width:150px;
    height:150px;
    color:#444444;
    padding:1px;
}

#grid-body > *,
#grid-body-algorithm > *{
  border:1px solid white;
}

<div id="grid-body-algorithm"></div>
distance: <input type="number" value="3" min="0" max="8">

Answer 3

Answer №2

If you want to ensure that the DOM structure is fully loaded before accessing elements, consider using an eventListener or the defer attribute.

Avoid using innerHTML to create elements as it can be slow and poses a risk of XSS Injection. Instead, opt for methods like appendChild or insertAdjacentHTML.

Using CSS for styling rather than inline styles is recommended for cleaner code. Additionally, utilizing SASS can further streamline your styling process.

When creating grid elements dynamically, remember to use separate variables for rows and columns in your loops. The first loop should handle rows while the second loop manages columns:

window.addEventListener('DOMContentLoaded', function() {
  for (let i = 1, n = 5; i < 5; i++) {
    for (let j = 1; j < n; j++) {
      document.querySelector('#grid-body-algorithm').insertAdjacentHTML('beforeend', `
        <div data-row="${i}" data-col="${j}">${j}</div>`
      );
    }
    n--;
  }
})

#grid-body-algorithm {
  width: 150px;
  height: 150px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  padding: 2px;
  gap: 2px;
  border: 1px solid black;
}

[data-row="1"] { grid-row: 1 / 2; }
[data-row="2"] { grid-row: 2 / 3; }
[data-row="3"] { grid-row: 3 / 4; }
[data-row="4"] { grid-row: 4 / 5; }
[data-row="5"] { grid-row: 5 / 6; }

[data-row="1"][data-col="1"] { background: #fd8362; }
[data-row="1"][data-col="2"],
[data-row="2"][data-col="1"] { background: #ffad97; }
[data-row="1"][data-col="3"],
[data-row="2"][data-col="2"],
[data-row="3"][data-col="1"] { background: #ffded6; }
[data-row="1"][data-col="4"],
[data-row="2"][data-col="3"],
[data-row="3"][data-col="2"],
[data-row="4"][data-col="1"] { background: #fff0ec; }

<div id="grid-body-algorithm"></div>

Answer 4

If you want to ensure that the DOM structure is fully loaded before accessing elements, consider using an eventListener or the defer attribute.

Avoid using innerHTML to create elements as it can be slow and poses a risk of XSS Injection. Instead, opt for methods like appendChild or insertAdjacentHTML.

Using CSS for styling rather than inline styles is recommended for cleaner code. Additionally, utilizing SASS can further streamline your styling process.

When creating grid elements dynamically, remember to use separate variables for rows and columns in your loops. The first loop should handle rows while the second loop manages columns:

window.addEventListener('DOMContentLoaded', function() {
  for (let i = 1, n = 5; i < 5; i++) {
    for (let j = 1; j < n; j++) {
      document.querySelector('#grid-body-algorithm').insertAdjacentHTML('beforeend', `
        <div data-row="${i}" data-col="${j}">${j}</div>`
      );
    }
    n--;
  }
})

#grid-body-algorithm {
  width: 150px;
  height: 150px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  padding: 2px;
  gap: 2px;
  border: 1px solid black;
}

[data-row="1"] { grid-row: 1 / 2; }
[data-row="2"] { grid-row: 2 / 3; }
[data-row="3"] { grid-row: 3 / 4; }
[data-row="4"] { grid-row: 4 / 5; }
[data-row="5"] { grid-row: 5 / 6; }

[data-row="1"][data-col="1"] { background: #fd8362; }
[data-row="1"][data-col="2"],
[data-row="2"][data-col="1"] { background: #ffad97; }
[data-row="1"][data-col="3"],
[data-row="2"][data-col="2"],
[data-row="3"][data-col="1"] { background: #ffded6; }
[data-row="1"][data-col="4"],
[data-row="2"][data-col="3"],
[data-row="3"][data-col="2"],
[data-row="4"][data-col="1"] { background: #fff0ec; }

<div id="grid-body-algorithm"></div>

Create dynamic cells for CSS grid using JavaScript

Answer №1

Answer №2

Similar questions

Unable to execute a GET request using the Fetch API on Django REST Framework results in receiving an HTTP 304 error code

Adding HTML content inside an iFrame at a specific cursor position in Internet Explorer

Ways to specify the styles for tr, td, and label elements within a material table

How to trigger a submit action on a different page from an iframe using PHP

Do HTML buttons without values get sent in a form submission?

Create a custom overlay for an image that is centered horizontally and does not have a fixed width

The URL is not being updated despite changes in document.location hash

Searching for the precise draggable grid line position in rulerguides.js - tips and tricks!

Issue arises during initialization with Slick.js

Loop through options in Vue.js and set a specific option as selected

Tips for eliminating repeated values in a textbox

Refresh the React state at regular intervals

A full-width CSS menu featuring dropdowns beneath each entry for easy navigation

Make jQuery fire an event when the "enter" key is pressed

Tips for configuring CakePHP to trigger the second submit button when the enter key is pressed

Discover the secret to instantly displaying comments after submission without refreshing the page in VueJS

Automatically execute a function when the number input changes, but only if no further changes are detected after a certain period of time

Code snippet for calculating the size of an HTML page using JavaScript/jQuery

sending data from a callback to an express router

Change web page in JavaScript using post data