JSFiddle - React, Tailwind, and code Playground

by Danja Wittmann

HTML

<div class="wrapper">
  <ul class="container">
    <li>1</li>
    <li>2</li>
    <li class="span">А я не такой как все</li>
    <li>4</li>
    <li>5</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>

CSS

* {
  box-sizing: border-box;
  padding: 0; margin: 0;
}
.wrapper {
  padding: 10px;
  border: 4px solid grey;
}
.container {
  display: grid;
  grid: auto / 1fr 1fr 1fr;
  grid-gap: 10px;
}
.container li {
  display: grid;
  border: 4px solid grey;
  min-height: 100px;
}
.container li.span {
  grid-row: 1 / 3;
  grid-column: 3;
  border: 4px solid green;
}