Search code examples
htmlcsssasscss-grid

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!

Solution

  • 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>