CODEWITHSUNDEEP
javascript
Webalation
Webalation

Reputation: 255

How to set each column to a different color in CSS Grid layout using JavaScript

I'm trying to figure out a way to target each column in my layout and set a different color on each one. What would be the best approach with my current implementation. Any help would be appreciated.

Each column should be a different color.

const container = document.getElementById("container");

function makeRows(rows, cols) {
  container.style.setProperty("--grid-rows", rows);
  container.style.setProperty("--grid-cols", cols);

  for (c = 0; c < rows * cols; c++) {
    let cell = document.createElement("div");
    cell.innerText = c + 1;
    container.appendChild(cell).className = "grid-item";
  }
}

makeRows(16, 16);
#container {
  display: grid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: center;
  height: 100px;
  width: 100px;
}
<div id="container"></div>

Upvotes: 2

Views: 2703

Answers (5)

Osman Durdag
Osman Durdag

Reputation: 955

const container = document.getElementById("container");
  
function makeRows(rows, cols) {
  container.style.setProperty("--grid-rows", rows);
  container.style.setProperty("--grid-cols", cols);

  let colorArray = []

  for (let index = 0; index < cols; index++) {
    colorArray.push(getRandomColor());
  }
  for (c = 0; c < rows * cols; c++) {
    let cell = document.createElement("div");
    cell.innerText = c + 1;
    container.appendChild(cell).className = "grid-item";
    cell.style.backgroundColor = `
      rgb(${colorArray[c % cols].r}, ${colorArray[c % cols].g}, ${colorArray[c % cols].b})
    `;
  }
}

function getRandomColor(){
  let r = Math.round(Math.random() * 255);
    let g = Math.round(Math.random() * 255);
    let b = Math.round(Math.random() * 255);
    let color = {
      "r" : r,
      "g" : g,
      "b" : b
    };
  
  return color;
}

makeRows(16, 16);
#container {
  display: grid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: center;
  height: 100px;
  width: 100px;
}
<div id="container"></div>

Upvotes: 1

Sunny
Sunny

Reputation: 1456

You can easily achieve this by using the style attribute of the cell. With this, you can add a background colour.

Here i make a common function from which you can generate the random colour.

getRandomColor() {  
    
      let letters = '0123456789ABCDEF'.split('');  
    
      let color = '#';  
    
      for (let i = 0; i < 6; i++) {  
    
        color += letters[Math.floor(Math.random() * 16)];  
    
      }  
    
      return color;  
    
    } 

      makeRows(rows, cols) {
    const container = document.getElementById("container");
    
        const obj = this;
        container.style.setProperty("--grid-rows", rows);
        container.style.setProperty("--grid-cols", cols);
      
        for (let c = 0; c < rows * cols; c++) {
          let cell = document.createElement("div");
          cell.innerText = (c + 1).toString();
          cell.style.backgroundColor = **obj.getRandomColor();**
      
          container.appendChild(cell).className = "grid-item";
        }
      }

random colour added

Upvotes: 0

hgb123
hgb123

Reputation: 14891

You could try this:

  • set cell background color by access its style property
  • random color by '#' + Math.random().toString(16).substring(2, 6) (substring from 2 to remove 0.)

const container = document.getElementById("container");

function makeRows(rows, cols) {
  container.style.setProperty("--grid-rows", rows);
  container.style.setProperty("--grid-cols", cols);

  for (c = 0; c < rows * cols; c++) {
    let cell = document.createElement("div");
    cell.innerText = c + 1;
    cell.style['background-color'] = '#' + Math.random().toString(16).substring(2, 6)
    container.appendChild(cell).className = "grid-item";
  }
}

makeRows(16, 16);
#container {
  display: grid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: center;
  height: 100px;
  width: 100px;
}
<div id="container"></div>

Upvotes: 1

gaetanoM
gaetanoM

Reputation: 42054

You can generate a random color or you can use fixed one. Using the getRandomColor function from this answer you can simply add a line to your code:

cell.style['background-color'] = "#"+((1<<24)*Math.random()|0).toString(16);

The demo:

const container = document.getElementById("container");

function makeRows(rows, cols) {
  container.style.setProperty("--grid-rows", rows);
  container.style.setProperty("--grid-cols", cols);

  for (c = 0; c < rows * cols; c++) {
      let cell = document.createElement("div");
      cell.innerText = c + 1;
      cell.style['background-color'] = "#" + ((1<<24)*Math.random()|0).toString(16);
      container.appendChild(cell).className = "grid-item";
  }
}

makeRows(16, 16);
#container {
    display: grid;
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
    padding: 1em;
    border: 1px solid #ddd;
    text-align: center;
    height: 100px;
    width: 100px;
}
<div id="container"></div>

Upvotes: 0

potato
potato

Reputation: 1123

You can set the colors in the loop that creates the grid elements, get the column number with c % cols: (notice the columnColors argument and the 2nd last line)

function makeRows(rows, cols, columnColors) {
  container.style.setProperty("--grid-rows", rows);
  container.style.setProperty("--grid-cols", cols);

  for (c = 0; c < rows * cols; c++) {
    let cell = document.createElement("div");
    cell.innerText = c + 1;
    cell.style.backgroundColor = columnColors[c % cols];
    container.appendChild(cell).className = "grid-item";
  }
}

Upvotes: 1

Related Questions