0

I have a 3 rows list of items. I need to divide first and second row by a borders, so I add right border to the items but I do not need borders for the items from the third row.

.test-row {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

.test-row-item {
  padding-bottom: 3.2rem;
  border-right-color: #2C327A;
  border-right-width: 1px;
  border-right-style: solid;
}
<div class="test-row">
  <div class="test-row-item">
    1
  </div>
   <div class="test-row-item">
    2
  </div>
   <div class="test-row-item">
    3
  </div>
   <div class="test-row-item">
    4
  </div>
   <div class="test-row-item">
    5
  </div>
   <div class="test-row-item">
    6
  </div>
   <div class="test-row-item">
    7
  </div>
  <div class="test-row-item">
    8
  </div>
  <div class="test-row-item">
    9
  </div>
  
</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
rick1
  • 946
  • 3
  • 15
  • 31
  • 1
    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) – isherwood Apr 04 '22 at 20:27

2 Answers2

1

In this particular case use a second CSS rule that removes the right-border starting from the 7th instance, using the selector .test-row-item:nth-child(n+7):

.test-row {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

.test-row-item {
  padding-bottom: 3.2rem;
  border-right-color: #2C327A;
  border-right-width: 1px;
  border-right-style: solid;
}

.test-row-item:nth-child(n+7) {
  border-right: none;
}
<div class="test-row">
  <div class="test-row-item">
    1
  </div>
  <div class="test-row-item">
    2
  </div>
  <div class="test-row-item">
    3
  </div>
  <div class="test-row-item">
    4
  </div>
  <div class="test-row-item">
    5
  </div>
  <div class="test-row-item">
    6
  </div>
  <div class="test-row-item">
    7
  </div>
  <div class="test-row-item">
    8
  </div>
  <div class="test-row-item">
    9
  </div>

</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
-1

.test-row {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

.test-row-item:nth-child(n + 4) {
  padding-bottom: 3.2rem;
  border-left-color: #2C327A;
  border-left-width: 1px;
  border-left-style: solid;
}
<div class="test-row">
  <div class="test-row-item">
    1
  </div>
   <div class="test-row-item">
    2
  </div>
   <div class="test-row-item">
    3
  </div>
   <div class="test-row-item">
    4
  </div>
   <div class="test-row-item">
    5
  </div>
   <div class="test-row-item">
    6
  </div>
   <div class="test-row-item">
    7
  </div>
  <div class="test-row-item">
    8
  </div>
  <div class="test-row-item">
    9
  </div>
  
</div>
Huan
  • 208
  • 2
  • 8