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

Html – How to color odd columns of an empty css grid?

Let’s say I have a simple html CSS script:

<!DOCTYPE html>
<html>
<head>
<style>
.grid {
  display: grid;
  grid-template-columns: repeat(27, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  height: 50rem;
  width: 50rem;
}



</style>
</head>
<body>

<div class="grid">
  <!-- Your grid items will go here, but for this example, we're leaving them empty -->
</div>


</body>
</html>

I want the odd columns of the grid meaning 1,3,5,etc.. to be the color gray.

Notice that I don’t have any elements in the grid!

Tags:

2

Answers


  1. 0

    Use a gradient coloration:

    .grid {
  display: grid;
  grid-template-columns: repeat(27, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  height: 50rem;
  width: 50rem;
  
  background: linear-gradient(90deg,#ccc 50%,#0000 0) 0/calc(200%/27);
}
    <div class="grid">
  <!-- Your grid items will go here, but for this example, we're leaving them empty -->
</div>
    Login or Signup to reply.
  2. 0

    To color odd columns of an empty CSS grid, you can use the :nth-child pseudo-class to target the grid items within the odd columns.
    for Example:
    In CSS,

    .grid-item:nth-child(odd) {
  background-color: lightblue; /* Set your desired background color */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search