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

Question

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>

Thank you for your response, on startup. No event necessary. — Webalation
– Webalation, Commented Sep 13, 2020 at 13:31

potato · Accepted Answer · 2020-09-13 13:34:51Z

1

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";
  }
}

answered Sep 13, 2020 at 13:34

potato

1,19313 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Webalation Over a year ago

Do I pass a function to columnColors property in makeRows function that sets a different color on each column?

potato Over a year ago

@Webalation The columnColors is an array of color strings (such as "red" or "#ff0000"), but you could pass a generator function or generate the colors array inside the function instead of accepting it as an argument if that suits your needs better.

Webalation Over a year ago

Thank you so much! This worked perfectly, will use a generateRandomColor function to pass in.

hgb123 · Accepted Answer · 2020-09-13 13:39:20Z

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>

Osman Durdag · Accepted Answer · 2020-09-13 14:34:46Z

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>

gaetanoM · Accepted Answer · 2020-09-13 13:38:42Z

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>

Sunny · Accepted Answer · 2020-09-13 14:24:14Z

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";
        }
      }

Collectives™ on Stack Overflow

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

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related