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, Sep 13 '20 at 13:31

score 1 · Accepted Answer · answered Sep 13 '20 at 13:34

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 '20 at 13:34

potato

995
11
19

Do I pass a function to columnColors property in makeRows function that sets a different color on each column? – Webalation Sep 13 '20 at 13:39
1

@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. – potato Sep 13 '20 at 13:41
Thank you so much! This worked perfectly, will use a generateRandomColor function to pass in. – Webalation Sep 13 '20 at 13:45

score 1 · Answer 2 · answered Sep 13 '20 at 13:39

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 · Answer 3 · 2020-09-13T14:34:46.003

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>

score 0 · Answer 4 · answered Sep 13 '20 at 13:38

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>

score 0 · Answer 5 · answered Sep 13 '20 at 14:24

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

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

5 Answers5