<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.