<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.