Question 225467 in Html Question posted in
Some basic documentation can be found here.

Html – Creating grid with background color

I want to create a 19 * 19 grid. Every grid square is 50px. In this grid odd columns should have the red background and even columns have green background. How to obtain this?

Here is the code I have written in pen, in this file the grid is like in chess I don’t want it to be like that.

https://codepen.io/viy_bal/pen/GRwLBBr

This is the output i want

Tags:

2

Answers


  1. 0

    Adding a wrapper for every row seems to be a good way to do this. In that case the grid’s html should look somewhat like this:

    <div class="colored-grid">
    <div class="wrapper">
      <div class='grid-cell'></div>
      <div class='grid-cell'></div>
      <div class='grid-cell'></div>
      <div class='grid-cell'></div>
      <div class='grid-cell'></div>
    </div>
    <div class="wrapper">
      <div class='grid-cell'></div>
      <div class='grid-cell'></div>
      <div class='grid-cell'></div>
      ...
    </div>
  </div>

    Add display: contents to the wrapper’s class and the rest of your code will do the job.

    Here’s the link helped me to find the solution.

    Also, here‘s the codepen I’ve edited from yours.

    Login or Signup to reply.
  2. 0

    To create a grid of 19 by 19 you can use js to create the cells.

    HTML:

     <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Colored Grid</title>
</head>

<body>
    <div class="colored-grid">
        <!-- The grid will be generated using JS -->
    </div>




    <script src="script.js"></script>

</body>

    ** CSS **

    body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: rgba(255, 255, 255, 0.5);
    font-family: Arial, sans-serif;
}

.colored-grid {
    display: grid;
    grid-template-columns: repeat(19, 50px);
    grid-template-rows: repeat(19, 50px);
    /* 19 columns of 50px each */
    gap: 5px;
    /* Gap between columns */
    height: auto;
    width: auto;
}

/* Apply red background to odd columns and green background to even columns */
.colored-grid>.even {
    background-color: red;
}

.colored-grid>.odd {
    background-color: green;
}

.grid-column {
    display: contents;
    /* To allow grid items to span entire column */
}

    ** JS **

       document.addEventListener("DOMContentLoaded", function () {
  const coloredGrid = document.querySelector(".colored-grid");

  // Create a 19x19 grid
  for (let row = 0; row < 19; row++) {
    for (let col = 0; col < 19; col++) {
      const cell = document.createElement("div");
      cell.classList.add("grid-cell");

      // Apply red background to odd columns and green background to even columns
      if (col % 2 === 0) {
        cell.classList.add("even");
      } else {
        cell.classList.add("odd");
      }

      coloredGrid.appendChild(cell);
    }
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search