CSS select row element on grid

Question

What's the best way to select the specific items in a row?

For example, let's make the div.test which index are odd to be background-color: red; on odd row, and div.test which index are even to be background-color: blue; on even row.

I can hard code it like my example below, but is there any better way of doing this?

The reason I don't use nth-child(odd) and nth-child(even) is that the styling of odd items in odd row is different from even items in even row. You will get the idea of running the code snippet...

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

.test {
  height: 100px;
}

.test:nth-child(1),
.test:nth-child(3),
.test:nth-child(6),
.test:nth-child(8) {
  background-color: red;
}

.test:nth-child(2),
.test:nth-child(4),
.test:nth-child(5),
.test:nth-child(7) {
  background-color: blue;
}

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

Does this answer your question? [How to target a specific column or row in CSS Grid Layout?](https://stackoverflow.com/questions/46308048/how-to-target-a-specific-column-or-row-in-css-grid-layout) — Daniel A. White, Mar 19 '22 at 15:45
@DanielA.White Greeting, I'm afraid it's not relevant because my question is different if you read it...I'll edit my question to make it clearer — , Mar 19 '22 at 15:50

James · Accepted Answer · 2022-03-19T16:57:09.073

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>

P.S.: This seems longer and more mess than your code, but it will be much easier and shorter than your code if you have a lot of them (grid).

score 0 · Answer 2 · answered Nov 09 '22 at 09:32

Nice idea is to use display: contents; like in example below:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.row {
  display: contents;
}
.row:nth-child(2n+1) div {
  background: CadetBlue;
}
.row:nth-child(2n+2) div {
  background: DarkCyan ;
}

<!DOCTYPE html>
<html>
<body>
  <div class="grid-container">
    <div class="row">
      <div>one</div>
      <div>two</div>
      <div>three</div>
      <div>four</div>
    </div>
    <div class="row">
      <div>five</div>
      <div>six</div>
      <div>seven</div>
      <div>eight</div>
    </div>
    <div class="row">
      <div>one</div>
      <div>two</div>
      <div>three</div>
      <div>four</div>
    </div>
    <div class="row">
      <div>five</div>
      <div>six</div>
      <div>seven</div>
     <div>eight</div>
    </div>
    <div class="row">
      <div>one</div>
      <div>two</div>
      <div>three</div>
      <div>four</div>
    </div>
    <div class="row">
      <div>five</div>
      <div>six</div>
      <div>seven</div>
      <div>eight</div>
    </div>
  </div>
</body>
</html>

CSS select row element on grid

2 Answers2