Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Coloring every other row using CSS Grid

Tags:

css

html-table

frontend

flexbox

css-grid

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>
like image 607
stormakt Avatar asked Oct 05 '19 19:10

stormakt

People also ask

How do I add color to grid gap in CSS?

There is a workaround way: use pseudo :after or :before in each column to apply background color to grid gap.

How does auto placement in CSS grid work?

Auto-placement by column In this case grid will add items in rows that you have defined using grid-template-rows . When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized.

What is auto fill in CSS grid?

Auto-fill: The auto-fill property fills the rows with as many columns as it can fit. The newly added column may be empty but it will still occupy a space in the given row. It is an important property in the CSS grid that make a responsive layout without writing a media query for each grid.

How do you arrange a grid element in CSS?

With CSS grid layout, the grid itself within its container as well as grid items can be positioned with the following 6 properties: justify-items , align-items , justify-content , align-content , justify-self , and align-self .

2 Answers

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.

like image 94
G-Cyrillus Avatar answered Oct 01 '22 07:10

G-Cyrillus

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>
like image 26
Temani Afif Avatar answered Oct 01 '22 08:10

Temani Afif
Sign in to Comment

Related questions

How to make continuous animations for elements with shorter animation duration's [GASP]
display: flex; doesn't work on iPad (both Chrome and Safari)
CSS way to adjust a div's height based on another div
How to Put Text Over an Image (in email)?
Use Chrome DevTools for rendering measurement for HTML5 graphics
Preloading images on safari for background image change [duplicate]
Efficient CSS3 Long Shadows on div with rounded corners
CSS Grid auto placement in IE/EDGE
How to increase width of underline for the multiline text when on hover
How to print a large canvas across multiple page widths in browser?
Bootstrap v4: What's the point of theme-color vs. standard color variable?
Height doesn't properly work on IOS (iphone)
How to get items to stretch to fill width?
Bootstrap 4 - Column to row on small display
Chrome 64 Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule
What does {}. before a CSS Selector mean?
Using fraction (fr) in calc() gives "Invalid property value"
Implementing a dark theme in jekyll
Text is not positioned the same in Safari as in other browsers
Half Doughnut Chart with Chart.js

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!