Remove right border from the last row items-CodePudding

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 >
  <div >
    1
  </div>
   <div >
    2
  </div>
   <div >
    3
  </div>
   <div >
    4
  </div>
   <div >
    5
  </div>
   <div >
    6
  </div>
   <div >
    7
  </div>
  <div >
    8
  </div>
  <div >
    9
  </div>
  
</div>

CodePudding user response：

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 >
  <div >
    1
  </div>
  <div >
    2
  </div>
  <div >
    3
  </div>
  <div >
    4
  </div>
  <div >
    5
  </div>
  <div >
    6
  </div>
  <div >
    7
  </div>
  <div >
    8
  </div>
  <div >
    9
  </div>

</div>

CodePudding user response：

.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 >
  <div >
    1
  </div>
   <div >
    2
  </div>
   <div >
    3
  </div>
   <div >
    4
  </div>
   <div >
    5
  </div>
   <div >
    6
  </div>
   <div >
    7
  </div>
  <div >
    8
  </div>
  <div >
    9
  </div>
  
</div>