<ul>
<li>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;
grid-row: span 2;
}
&:nth-child(6) {
aspect-ratio: 4.95 / 2;
background-color: gold;
grid-column: span 2;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.