How to Target a Specific Column or Row in CSS Grid Layout

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>

How to target the last column in a CSS grid?

Such selector exist but we are still far from having a good support for it. You can read:

To be able to represent such implied column-based relationships, the column combinator and the :nth-col() and :nth-last-col() pseudo-classes are defined

For your particular case, a background can do the job:

.grid 
{
  display: grid;
  grid-template-areas: "d b c a";
  grid-template-columns: repeat( 4, 1fr );
  background:
    linear-gradient(90deg,#0000 calc(100% - 1px), #000 0)
    0 50%/calc((100% + 1px)/4) 50% repeat-x
    #F4F4F4;
}

.column.a { 
  grid-area: a; 
}

.column.b { 
  grid-area: b; 
}

.column.c { 
  grid-area: c; 
}

.column.d { 
  grid-area: d; 
}


/* Flavor */
.grid 
{
  margin: 20px auto;
  max-width: 600px;
  padding: 20px;
}

.column { 
  width: 100%; 
  text-align: center;
}

<div class="grid">
  <div class="column a">A</div>
  <div class="column b">B</div>
  <div class="column c">C</div>
  <div class="column d">D</div>
</div>

Target CSS grid column within a single element

In grid layout you can wrap cells in a div using display:contents:

:root {
  --col-no: 1;
}

.wrapper {
  height: 300px;
  width: 100vw;
  display: grid;
  grid-template-columns: 100px repeat(6, 150px);
  grid-auto-flow: column;
  overflow: scroll;
}

.section {
  background-color: lightgreen;
}

.title {
  background-color: orange !important;
}

.col {
  /* disply contents */
  display: contents;
}

.col:nth-child(2n + 2)>* {
  background-color: #ddd;
}

.col:first-child>div {
  position: sticky;
  left: 0;
}

.col>* {
  grid-column: var(--col-no);
}

.footer {
  display: contents;
}

.footer>div {
  background-color: yellow;
  grid-row: 1000;
  position: sticky;
  bottom: 0;
}

.col:nth-child(1) {
  --col-no: 1;
}

.col:nth-child(2) {
  --col-no: 2;
}

.col:nth-child(3) {
  --col-no: 3;
}

.col:nth-child(4) {
  --col-no: 4;
}

.col:nth-child(5) {
  --col-no: 5;
}

.col:nth-child(6) {
  --col-no: 6;
}

<div class="wrapper">
  <div class="col">
    <div class="section">
      <span>Section title1</span>
    </div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="section">
      <span>Section title2</span>
    </div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="section">
      <span>Section title3</span>
    </div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
  </div>
  <div class="col">
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value value value =</div>
    <div class="items">value</div>
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
  </div>

  <div class="col">
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items"></div>
    <div class="items">value abc abc efgh hijk lmin = =</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
  </div>

  <div class="col">
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value value value value value===</div>
    <div class="items">value</div>
    <div class="items">value</div>
  </div>

  <div class="col">
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value value value value value</div>
    <div class="items">value</div>
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
  </div>

  <div class="col">
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value value value</div>
    <div class="items">value</div>
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
  </div>


  <div class="grid footer">
    <div class="item title">Foot Key</div>
    <div class="item">CTA</div>
    <div class="item">CTA</div>
    <div class="item">CTA</div>
    <div class="item">CTA</div>
    <div class="item">CTA</div>
  </div>
</div>

CSS select row element on grid

This is a solution by changing the html structure a little bit.

Important Note: This will only work if you could have ability to change html structure.

#ct {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  margin-bottom: 20px;
}

.test {
  height: 100px;
}

#ct:nth-child(odd)>.test:nth-child(odd) {
  background-color: red
}

#ct:nth-child(odd)>.test:nth-child(even) {
  background-color: blue
}

#ct:nth-child(even)>.test:nth-child(odd) {
  background-color: blue
}

#ct:nth-child(even)>.test:nth-child(even) {
  background-color: red
}

<div id="ct">
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
</div>
<div id="ct">
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
</div>

CSS Grid how to select row to add hover effect?

display: contents; to the rescue!

Kinda.

Depending on your browser support and/or accessibility requirements, we can achieve the effect you want, using the general structure you have, with the relatively new display: contents property.

Describing display: contents is somewhat difficult, so I'll point to this excellent CSS Tricks article.

To use it, we'll wrap each group of <span> elements in a row into a <div> with display: contents. This allows us to target the div:hover > span elements and apply a background color.

There were a few others small changes required to your styling, like making the <span> elements fill the available width. Here's a working example:

.parent {  display: grid;  box-sizing: border-box;  width: 100%;  border: 1px solid #dbeaf4;  grid-template-columns: repeat(4, minmax(15%, max-content));  padding: 5px 0;}
.parent span {  padding: 5px;  border-bottom: 1px solid #dbeaf4;}
.row {  display: contents;}
.row:hover span {  background-color: #dbeaf4;  cursor: pointer;}

<div class="parent">  <div class="row">    <span>1</span>    <span>2</span>    <span>3</span>    <span>Knowledge process outsourcing land the plane yet to be inspired is to become creative, innovative and energized we want this</span>  </div>  <div class="row">    <span>1</span>    <span>2</span>    <span>3</span>    <span>4</span>  </div>  <div class="row">    <span>We need to socialize the comms with the wider stakeholder community</span>    <span>2</span>    <span>3</span>    <span>4</span>  </div>  <div class="row">    <span>1</span>    <span>2</span>    <span>3</span>    <span>4</span>  </div>  <div class="row">    <span>1</span>    <span>2</span>    <span>3</span>    <span>4</span>  </div></div>

Starting grid column from half of the column

Is it possible to start a column from the half of the column?

No. It is not.

Let's say you have a grid container with five columns and want to start spanning from halfway inside the first column (grid-column: 1.5 / 5 ). This won't work because you're not starting at a column line. More technically, the grid-row-* and grid-column-* properties accept only integers as values.

However, there is a simple workaround:

Instead of five columns use 10 columns.
Then start spanning at the third column (grid-column: 3 / 10).

This creates an equivalent layout, which looks the same visually, but with more precise control of the columns.

More details here: Changing div heights using CSS grid

How to Target a Specific Column or Row in CSS Grid Layout