Highlight CSS Grid

How to highlight CSS grid cells?

One idea using JS is to read the computed value of grid-template-columns and grid-template-rows in order to create another grid above the one you have filled with placeholder elements.

Here is a basic example. You should update the values on hover since getComputedStyle will return pixel values:

var grid = document.querySelector('.grid');var overlay = document.createElement("div");overlay.className = 'overlay';overlay.style.gridTemplateRows = window.getComputedStyle(grid, null).getPropertyValue("grid-template-rows");overlay.style.gridTemplateColumns = window.getComputedStyle(grid, null).getPropertyValue("grid-template-columns");grid.appendChild(overlay);
/* Get the number of items*/var Nc = overlay.style.gridTemplateColumns.split(" ").length;var Nr = overlay.style.gridTemplateRows.split(" ").length;/* Create placeholder items*/for (var i = 0; i < Nc * Nr; i++) {  var d = document.createElement("div");  overlay.appendChild(d);}
/* Update the values on hover*/grid.addEventListener('mouseover', function() {  overlay.style.gridTemplateRows = window.getComputedStyle(grid, null).getPropertyValue("grid-template-rows");  overlay.style.gridTemplateColumns = window.getComputedStyle(grid, null).getPropertyValue("grid-template-columns");})

.grid {  display: grid;  grid-template-columns: repeat(8, 1fr);  grid-column-gap: 16px;  grid-row-gap: 8px;  position: relative;  overflow:hidden;}
.first {  grid-column: 1 / 3;  background-color: #ccc;}
.second {  grid-column: 5 / 6;  grid-row: 2 / 5;  background-color: #ccc;  height: 120px;}
.overlay {  position: absolute;  display: grid;  top: 0;  left: 0;  right: 0;  bottom: 0;  grid-gap: inherit;  opacity: 0;  pointer-events: none;}
.overlay>* {  border: 1px dotted;  background: rgba(0, 125, 0, 0.4);}
.grid:hover .overlay {  opacity: 1;}

<div class="grid">  <div class="first">First</div>  <div class="second">Second</div></div>

Highlight elements in a css grid layout using javascript

All you need is Element.classList.toggle() and a specific CSS class, i.e: "is-active"
PS: filter brightness expects a maximal value of 100%

const ELS_box = document.querySelectorAll(".box");
ELS_box.forEach(EL => EL.addEventListener("click", function() {
  this.classList.toggle("is-active");
}))

.boxes {
  display: grid;
  grid-template-columns: repeat(5, 30px);
  grid-template-rows: repeat(5, 30px);
  grid-auto-flow: column;
}

.box {
  margin: 5px;
  background: red;
}

.box.is-active {
  filter: brightness(50%);
}

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS Grid - Highlight cells up to the hovered cell

Here's a pure css Idea if you don't mind nesting the content on more level just to put it over the fake background.

.grid {
    overflow:hidden;
    display: grid;
    grid-template-columns: repeat(5, 50px);
    grid-template-rows: repeat(5, 50px);
    gap: 5px;
}

.grid-item {
    background: lightgray;
    position: relative;
    display: flex;
}

.grid-item>span {
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-item:hover:before {
    position: absolute;
    content: '';
    background: linear-gradient(to left,#ff000000 0px 50px,#ffffff 50px 55px) 0 0/55px, linear-gradient(to top,lightblue 0px 50px,#ffffff00 50px 55px) 0 0/1px 55px ;
    z-index: 1;
    width: calc(55px * 9);
    height: calc(55px * 9);
    bottom: 0;
    right: 0;
}

<div class="grid">
  <div class="grid-item"><span>1</span></div>
  <div class="grid-item"><span>2</span></div>
  <div class="grid-item"><span>3</span></div>
  <div class="grid-item"><span>4</span></div>
  <div class="grid-item"><span>5</span></div>
  <div class="grid-item"><span>6</span></div>
  <div class="grid-item"><span>7</span></div>
  <div class="grid-item"><span>8</span></div>
  <div class="grid-item"><span>9</span></div>
  <div class="grid-item"><span>10</span></div>
  <div class="grid-item"><span>11</span></div>
  <div class="grid-item"><span>12</span></div>
  <div class="grid-item"><span>13</span></div>
  <div class="grid-item"><span>14</span></div>
  <div class="grid-item"><span>15</span></div>
  <div class="grid-item"><span>16</span></div>
  <div class="grid-item"><span>17</span></div>
  <div class="grid-item"><span>18</span></div>
  <div class="grid-item"><span>19</span></div>
  <div class="grid-item"><span>20</span></div>
  <div class="grid-item"><span>21</span></div>
  <div class="grid-item"><span>22</span></div>
  <div class="grid-item"><span>23</span></div>
  <div class="grid-item"><span>24</span></div>
  <div class="grid-item"><span>25</span></div>
</div>

Coloring every other row using CSS Grid

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>

How to target a specific column or row in CSS Grid Layout?

Not possible with CSS.

CSS targets HTML elements, attributes and attribute values.

Grid columns and rows have none of these "hooks".

You'll have to target the grid items directly.

You wrote:

For example, say I have a 3 row by 2 column CSS Grid Layout: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. How would I select all elements from the 2nd column?

grid-container {  display: grid;  grid-template-columns: 1fr 1fr;  grid-template-rows: 1fr 1fr 1fr;  grid-gap: 10px;  padding: 10px;  height: 50vh;  background-color: gray;}
grid-item {  background-color: lightgreen;}
grid-item:nth-child(2n) {  border: 2px dashed red;}

<grid-container>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item></grid-container>

Is there CSS Grid highlighting in Chrome Developer Tools?

Chrome v62 added Grid highlighting support to its dev tools:

To view the CSS Grid that's affecting an element, hover over an element in the DOM Tree of the Elements panel. A dashed border appears around each of the grid items. This only works when the selected item, or the parent of the selected item, has display:grid applied to it.

The Chrome Developers article above also includes a link to a short Google Developers YouTube video on using it: https://www.youtube.com/watch?v=AqwPrR7hklE

Prior to Chrome v62 there was no way in the Chrome dev tools to inspect grids like this. It's one of areas where Firefox dev tools were—and continue to be—significantly stronger. At the time, Chrome-latest did support the highlighting of various CSS Grid cells and tracks, though.

There are also CSS Grid inspector addons for Chrome that may support this feature. I don't use any of them, but there are at least half a dozen I have seen. One that looks promising is Gridman - CSS Grid Inspector (I have no affiliation with this addon or developer).