Select a grid item only when there's an odd number of items in the container

I am trying to achieve a grid layout which looks for number of elements inside Container Div, if the number of child elements inside the Container Div is odd then stretch the nth-child(5) to the second column, like this - https://codepen.io/sinhasagar01/pen/LYRwmwo

<div class="container">    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>    <div>5</div>    <div>new 6</div>    <div>7</div>    <div>8</div>  </div>  

CSS

.container {    margin:20px auto;    display: grid;    grid-gap: 10px;    grid-template-columns: repeat(2, 1fr);      div {      background: #333;      height: 40px;      color: #fff;    }  }  

Otherwise if the number of elements inside the container Div is Even then do nothing, the above code is the example of this.

https://stackoverflow.com/questions/65912300/select-a-grid-item-only-when-theres-an-odd-number-of-items-in-the-container January 27, 2021 at 10:58AM