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{
  overflow: hidden;
  padding: 0;
}
li{
  list-style: none;
  float: left;
  border:1px solid #bbb;
  height: 250px;
  width: calc(20% - 0.8em); /* (100% - 4 интервала по 1em) / 5 */
  margin: 0 0 1em 1em;
  box-sizing: border-box;
}
li:first-child{
  width: calc(40% - 0.6em); /* 2 колонки по 20% - 0.8em каждая + 1em интервала */
  height: calc(500px + 1em);
  margin-left: 0;
}