Coloring every other row using CSS Grid

Question

I want to color every other row in a table i'm building using CSS Grid. I can't get it to work though, i'm only able to get every other column colored. Here's a picture of what I want to do. Would there be a better way of building this out? I'm only using CSS Grid because it's something new I wanted to learn.

picture of how I want it to look

picture of my table

Here's my current code:

  .wrapper {
  border-style: solid;
  border-color: rgb(230, 230, 230);
  font-weight: bold;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(18, 35px);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.wrapper>div:nth-child(odd) {
  background: #ddd;

<div class="container">
  <div class="wrapper">
    <div>Month</div>
    <div>Overtime Hours</div>
    <div>Compensation Hours</div>
    <div>Vacation</div>
    <div>Personal Hours</div>
    <div>Sick Hours</div>

    <div>Carry Over</div>
    <div>0.00</div>
    <div>-</div>
    <div>35.00</div>
    <div>-</div>
    <div>-</div>


    <div>Allotted</div>
    <div>-</div>
    <div>-</div>
    <div>140.00</div>
    <div>14.00</div>
    <div>-</div>

    <div>Starting Total</div>
    <div>0.00</div>
    <div>-</div>
    <div>175.00</div>
    <div>14.00</div>
    <div>-</div>

    <div>Jan</div>
    <div>-</div>
    <div>-</div>
    <div>-</div>
    <div>2.00</div>
    <div>7.00</div>


    <div>Feb</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>-</div>
    <div>-</div>

    <div>March</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>April</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>May</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Jun</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Jul</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Aug</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Sep</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Oct</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Nov</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Dec</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Yearly Total</div>
    <div>0.00</div>
    <div>0.00</div>
    <div>150.50</div>
    <div>10.50</div>
    <div>28.00</div>

    <div>Balance in Hours</div>
    <div></div>
    <div>0.00</div>
    <div>24.50</div>
    <div>3.50</div>
    <div></div>

    <div>Balance in Days</div>
    <div></div>
    <div>0.00</div>
    <div>3.50</div>
    <div>0.50</div>
    <div></div>
  </div>
</div>

Bertrambertrand

Honestly for a table using a table element is the best choice. You can then use tr:nth-child(even) (or odd) to style your rows. If you want to learn grid then build a grid layout, not a table. Something like a sidebar, a grid of images in a gallery. – Curriery

Answer 1

You are defining a fixed height for each row so you can easily consider a repeated gradient:

.wrapper {
  border-style: solid;
  border-color: rgb(230, 230, 230);
  font-weight: bold;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(18, 35px);
  background:
    repeating-linear-gradient(#ddd 0 35px,transparent 35px 70px);
}

<div class="container">
  <div class="wrapper">
    <div>Month</div>
    <div>Overtime Hours</div>
    <div>Compensation Hours</div>
    <div>Vacation</div>
    <div>Personal Hours</div>
    <div>Sick Hours</div>

    <div>Carry Over</div>
    <div>0.00</div>
    <div>-</div>
    <div>35.00</div>
    <div>-</div>
    <div>-</div>


    <div>Allotted</div>
    <div>-</div>
    <div>-</div>
    <div>140.00</div>
    <div>14.00</div>
    <div>-</div>

    <div>Starting Total</div>
    <div>0.00</div>
    <div>-</div>
    <div>175.00</div>
    <div>14.00</div>
    <div>-</div>

    <div>Jan</div>
    <div>-</div>
    <div>-</div>
    <div>-</div>
    <div>2.00</div>
    <div>7.00</div>


    <div>Feb</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>-</div>
    <div>-</div>

    <div>March</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>April</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>May</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Jun</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Jul</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Aug</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Sep</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Oct</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Nov</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Dec</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Yearly Total</div>
    <div>0.00</div>
    <div>0.00</div>
    <div>150.50</div>
    <div>10.50</div>
    <div>28.00</div>

    <div>Balance in Hours</div>
    <div></div>
    <div>0.00</div>
    <div>24.50</div>
    <div>3.50</div>
    <div></div>

    <div>Balance in Days</div>
    <div></div>
    <div>0.00</div>
    <div>3.50</div>
    <div>0.50</div>
    <div></div>
  </div>
</div>

Raising

this works, but how, what is repeating-linear-gradient doing? also gap will break this table? and you also cant justify-self on child items, as they would also break the table. – Arc

It worked so nicely until I scrolled my grid to the left within its scrollable div. On Chrome, it only shades the originally-visible portion, prior to scrolling. – Grosmark

for some reason, i have a guts feeling this would fail, especially when one of the row extends certain height. – Heptane

Answer 2

if you have a six column grid, then you have a new row every 6+1 elements, for an alternative pattern on each odd rows, then your repeating patterns starts every 12+1 elements. :nth-child(n+n) will help you here :

.wrapper {
  border-style: solid;
  border-color: rgb(230, 230, 230);
  font-weight: bold;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(18, 35px);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
/* 6 columns, odd rows starts every 12th element, a row is made of six elements, so here is 6 selectors to select an entire row*/
.wrapper>div:nth-child(12n+1),
.wrapper>div:nth-child(12n+2),
.wrapper>div:nth-child(12n+3),
.wrapper>div:nth-child(12n+4),
.wrapper>div:nth-child(12n+5),
.wrapper>div:nth-child(12n+6)
{
  background: #ddd;
  }

<div class="container">
  <div class="wrapper">
    <div>Month</div>
    <div>Overtime Hours</div>
    <div>Compensation Hours</div>
    <div>Vacation</div>
    <div>Personal Hours</div>
    <div>Sick Hours</div>

    <div>Carry Over</div>
    <div>0.00</div>
    <div>-</div>
    <div>35.00</div>
    <div>-</div>
    <div>-</div>


    <div>Allotted</div>
    <div>-</div>
    <div>-</div>
    <div>140.00</div>
    <div>14.00</div>
    <div>-</div>

    <div>Starting Total</div>
    <div>0.00</div>
    <div>-</div>
    <div>175.00</div>
    <div>14.00</div>
    <div>-</div>

    <div>Jan</div>
    <div>-</div>
    <div>-</div>
    <div>-</div>
    <div>2.00</div>
    <div>7.00</div>


    <div>Feb</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>-</div>
    <div>-</div>

    <div>March</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>April</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>May</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Jun</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Jul</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Aug</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Sep</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Oct</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Nov</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Dec</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Yearly Total</div>
    <div>0.00</div>
    <div>0.00</div>
    <div>150.50</div>
    <div>10.50</div>
    <div>28.00</div>

    <div>Balance in Hours</div>
    <div></div>
    <div>0.00</div>
    <div>24.50</div>
    <div>3.50</div>
    <div></div>

    <div>Balance in Days</div>
    <div></div>
    <div>0.00</div>
    <div>3.50</div>
    <div>0.50</div>
    <div></div>
  </div>
</div>

Note: if any of your elements spans more than 1 cell, the :nth-child(n+x) rule will break.

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#examples

:nth-child()

The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings.

---

Comments shows a possible issue if grid has gaps :

.wrapper {
  border-style: solid;
  border-color: rgb(230, 230, 230);
  font-weight: bold;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(18, 35px);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  gap: 0.5em 1em;
  overflow:hidden;
}
/* 6 columns, odd rows starts every 12th element, a row is made of six elements, so here is 6 selectors to select an entire row*/
.wrapper>div:nth-child(12n+1),
.wrapper>div:nth-child(12n+2),
.wrapper>div:nth-child(12n+3),
.wrapper>div:nth-child(12n+4),
.wrapper>div:nth-child(12n+5),
.wrapper>div:nth-child(12n+6)
{
  background: #ddd;
  box-shadow:1em 0 #ddd
  }

<div class="container">
  <div class="wrapper">
    <div>Month</div>
    <div>Overtime Hours</div>
    <div>Compensation Hours</div>
    <div>Vacation</div>
    <div>Personal Hours</div>
    <div>Sick Hours</div>

    <div>Carry Over</div>
    <div>0.00</div>
    <div>-</div>
    <div>35.00</div>
    <div>-</div>
    <div>-</div>


    <div>Allotted</div>
    <div>-</div>
    <div>-</div>
    <div>140.00</div>
    <div>14.00</div>
    <div>-</div>

    <div>Starting Total</div>
    <div>0.00</div>
    <div>-</div>
    <div>175.00</div>
    <div>14.00</div>
    <div>-</div>

    <div>Jan</div>
    <div>-</div>
    <div>-</div>
    <div>-</div>
    <div>2.00</div>
    <div>7.00</div>


    <div>Feb</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>-</div>
    <div>-</div>

    <div>March</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>April</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>May</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Jun</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Jul</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Aug</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Sep</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Oct</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Nov</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Dec</div>
    <div>-</div>
    <div>-</div>
    <div>7.00</div>
    <div>2.00</div>
    <div>3.50</div>

    <div>Yearly Total</div>
    <div>0.00</div>
    <div>0.00</div>
    <div>150.50</div>
    <div>10.50</div>
    <div>28.00</div>

    <div>Balance in Hours</div>
    <div></div>
    <div>0.00</div>
    <div>24.50</div>
    <div>3.50</div>
    <div></div>

    <div>Balance in Days</div>
    <div></div>
    <div>0.00</div>
    <div>3.50</div>
    <div>0.50</div>
    <div></div>
  </div>
</div>

Durazzo

A link to information on :nth-child(n+n) (even if it seems obvious) would be helpful. It's difficult to search for something like this, since we aren't provided a name for the technique. – Pother

@Pother good point , added a link to mdn for reference. – Durazzo

Of course, this will set the background color of each child element for the row, which will appear as if the background color is set for the whole row, but only if column-gap is 0. If the grid has column gaps, the background color for the row will have color gaps. – Manufacturer

@Manufacturer this not a big trouble, i added a second snippet to show a way to fill that gap with the same color as background ;) – Durazzo

Answer 3

Using display: contents; as "buffer" elements will achieve what you are looking for. By wrapping each row in a content only div you can select them (odd or even) and style each element in the row. The caveat to this approach is that gap cannot be used since it will create a gap in the background.

.wrapper {
  border-style: solid;
  border-color: rgb(230, 230, 230);
  font-weight: bold;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(18, 35px);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
.wrapper .table-row {
  display: contents;
}
.wrapper .table-row:nth-child(odd) * {
  background-color: #ddd;
}

<div class="container">
  <div class="wrapper">
    <div class="table-row">
      <div>Month</div>
      <div>Overtime Hours</div>
      <div>Compensation Hours</div>
      <div>Vacation</div>
      <div>Personal Hours</div>
      <div>Sick Hours</div>
    </div>

    <div class="table-row">
      <div>Carry Over</div>
      <div>0.00</div>
      <div>-</div>
      <div>35.00</div>
      <div>-</div>
      <div>-</div>
    </div>

    <div class="table-row">
      <div>Allotted</div>
      <div>-</div>
      <div>-</div>
      <div>140.00</div>
      <div>14.00</div>
      <div>-</div>
    </div>

    <div class="table-row">
      <div>Starting Total</div>
      <div>0.00</div>
      <div>-</div>
      <div>175.00</div>
      <div>14.00</div>
      <div>-</div>
    </div>

    <div class="table-row">
      <div>Jan</div>
      <div>-</div>
      <div>-</div>
      <div>-</div>
      <div>2.00</div>
      <div>7.00</div>
    </div>

    <div class="table-row">
      <div>Feb</div>
      <div>-</div>
      <div>-</div>
      <div>7.00</div>
      <div>-</div>
      <div>-</div>
    </div>

    <div class="table-row">
      <div>March</div>
      <div>-</div>
      <div>-</div>
      <div>7.00</div>
      <div>2.00</div>
      <div>3.50</div>
    </div>

    <div class="table-row">
      <div>April</div>
      <div>-</div>
      <div>-</div>
      <div>7.00</div>
      <div>2.00</div>
      <div>3.50</div>
    </div>

    <div class="table-row">
      <div>May</div>
      <div>-</div>
      <div>-</div>
      <div>7.00</div>
      <div>2.00</div>
      <div>3.50</div>
    </div>

    <div class="table-row">
      <div>Jun</div>
      <div>-</div>
      <div>-</div>
      <div>7.00</div>
      <div>2.00</div>
      <div>3.50</div>
    </div>

    <div class="table-row">
      <div>Jul</div>
      <div>-</div>
      <div>-</div>
      <div>7.00</div>
      <div>2.00</div>
      <div>3.50</div>
    </div>

    <div class="table-row">
      <div>Aug</div>
      <div>-</div>
      <div>-</div>
      <div>7.00</div>
      <div>2.00</div>
      <div>3.50</div>
    </div>

    <div class="table-row">
      <div>Sep</div>
      <div>-</div>
      <div>-</div>
      <div>7.00</div>
      <div>2.00</div>
      <div>3.50</div>
    </div>

    <div class="table-row">
      <div>Oct</div>
      <div>-</div>
      <div>-</div>
      <div>7.00</div>
      <div>2.00</div>
      <div>3.50</div>
    </div>

    <div class="table-row">
      <div>Nov</div>
      <div>-</div>
      <div>-</div>
      <div>7.00</div>
      <div>2.00</div>
      <div>3.50</div>
    </div>

    <div class="table-row">
      <div>Dec</div>
      <div>-</div>
      <div>-</div>
      <div>7.00</div>
      <div>2.00</div>
      <div>3.50</div>
    </div>

    <div class="table-row">
      <div>Yearly Total</div>
      <div>0.00</div>
      <div>0.00</div>
      <div>150.50</div>
      <div>10.50</div>
      <div>28.00</div>
    </div>

    <div class="table-row">
      <div>Balance in Hours</div>
      <div></div>
      <div>0.00</div>
      <div>24.50</div>
      <div>3.50</div>
      <div></div>
    </div>

    <div class="table-row">
      <div>Balance in Days</div>
      <div></div>
      <div>0.00</div>
      <div>3.50</div>
      <div>0.50</div>
      <div></div>
    </div>
  </div>
</div>

Roundtree

Answer 4

The best solution I've found was to extend what @G-Cyrillus was suggesting, and by using SCSS achieve this in a concise fashion. The assumptions are that you have a grid with a class name of 'grid', and each grid item containing data has a class name of 'grid__item'

@mixin row-background($columnCount, $columnStart: 0, $columnEnd: 0) {
    $columnDoubleCount: ($columnCount * 2) + n;

    @if $columnEnd == 0 {
        $columnEnd: $columnStart + $columnCount;
    }

    @for $i from $columnStart to $columnEnd {
        .grid__item:nth-child(#{$columnDoubleCount} + #{$i}) {
            background: red;
        }
    }
}

The idea is to set the main background to be whatever you like, and then use this mixin to colour the even rows.

I've included a column offset start and end, if you need to change the background of only some columns. Calling this is quite simple, assuming you have 25 rows and the alternative background shading needs to run from the tenth to fifteenth columns:

.grid {
    @include row-background(25, 10, 15);
}

Amaya