<button onclick="toggle()">Toggle grid-row</button>
<ul>
  <li class="toggle" style="grid-row: span 2;">1<sup>st</sup></li>
  <li>2<sup>nd</sup></li>
  <li>3<sup>rd</sup></li>
  <li>4<sup>th</sup></li>
  <li>5<sup>th</sup></li>
  <li>6<sup>th</sup></li>
  <li>7<sup>th</sup></li>
  <li>8<sup>th</sup></li>
</ul>
ul {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  list-style-type: none;
  margin: 0 auto;
  max-width: 200px;
  padding: 0;
}
li {
  aspect-ratio: 1 / 1;
  background: silver;
  padding: 5px;
  &:first-child {
    background-color: gold;
    grid-column: span 2;
  }
  &:nth-child(6) {
    aspect-ratio: auto;
    background-color: gold;
    grid-column: span 2;
  }
}

button {
  display: block;
  margin: 10px auto;
  width: fit-content;
}
View Compiled
function toggle() {
  let item = document.getElementsByClassName('toggle')[0],
      value = 'span 2 / auto';
  if(item.style.gridRow === value) {
    item.style.gridRow = 'auto';
  } else {
    item.style.gridRow = value;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.