JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>

CSS

ul{
  display: grid;
  grid: repeat(2, 1fr)/repeat(5, 1fr); /* 2 ряда равной высоты, 5 колонок равной ширины */
  padding: 0;
  grid-gap: 1em; /* заодно и отступ между карточками сделаем */
}
li{
  display: flex;
  border:1px solid #bbb;
  min-height: 200px;
}
li:first-child{
  grid-area: span 2/span 2; /* заполнить 2 ряда и 2 колонки, начиная (по умолчанию) с левого верхнего угла */
}