JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="aaa">
  <div class="bbb">1</div>
  <div class="bbb">2</div>
  <div class="bbb">3</div>
  <div class="bbb">4</div>
  <div class="bbb">5</div>
  <div class="bbb">6</div>
  <div class="bbb">7</div>
  <div class="bbb">8</div>
  <div class="bbb">9</div>
  <div class="bbb">10</div>
  <div class="bbb">11</div>
</div>

CSS

.aaa {
display: grid;
      grid-template-rows: 1fr 1fr;
      grid-auto-flow: column;
      grid-auto-columns: min-content;
      gap: 8px;
}

.bbb:first-child {
  font-size: 50px;
  line-height: 100px;
  text-align: center;
  height: 100px;
  width: 100px;
}

.bbb {
  background: #cccccc;
  font-size: 50px;
  line-height: 50px;
  text-align: center;
  height: 50px;
  width: 50px;
}