JSFiddle - React, Tailwind, and code Playground

HTML

<ul>

  <li class="c-2">1</li>
  <li class="c-2">2</li>
  <li class="c-2">3</li>
  <li class="r-2">4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li class="r-2 c-2">10</li>
  <li>11</li>
  <li>12</li>
  <li class="c-2">13</li>
  <li class="c-2">14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>

</ul>
<button>btn</button>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Neucha', cursive;
}

ul {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  //grid-auto-flow: row dense;
  list-style-type: none;
}

.del li:nth-child(odd) {
  display: none;
}
li {
  padding: 10px;
  background: #eee;
}

.r-2 {
grid-row: span 2;
}
.c-2 {
grid-column: span 2;
}

JavaScript

document.querySelector('button').addEventListener('click', ()=>{
document.querySelector('ul').classList.add('del');
})