如何创建一个由三个叠加单元格组成的网格，其大小只有两行？ （HTML，CSS）[关闭]

Question

首先，抱歉这个问题，这看起来很愚蠢，但我不知道该问谁。 我想根据《Valorant》游戏中的武器选择来制作这个网格。 （图像）在html，css（js？）中，基于表格或网格（或任何最好的）。 我已经开始了，但是我无法让元素 14 19 和 21 只占据 1/2 的空间。

请帮助我！

我的开始：

.container {
    display: grid;
}
.c2 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    
}

.item {
    border: 1px solid black;
    grid-row : span 2;
}
.bleu {
    background-color: #28B;
}
.vert {
    background-color: #2B8;
}
.jaune {
    background-color: #BB2;
}

.large {
    grid-row: span 5;    /* L'élément 1 s'étend sur 3 lignes */
}

.invisible {
    visibility: hidden;
}

.petit{
    grid-row: span 2;
}

<div class="container c2">
    <div class="item vert large">Elément 1</div>
    <div class="item vert">Elément 2</div>
    <div class="item vert">Elément 3</div>
    <div class="item vert">Elément 4</div>
    <div class="item vert">Elément 5</div>
    <div class="item vert">Elément 6</div>
    <div class="item vert">Elément 7</div>
    <div class="item vert">Elément 8</div>
    <div class="item vert">Elément 9</div>
    <div class="item vert">Elément 10</div>
    <div class="item vert">Elément 11</div>
    <div class="item vert">Elément 12</div>
    <div class="item vert">Elément 13</div>
    <div class="item vert petit">Elément 14</div>
    <div class="item vert">Elément 15</div>
    <div class="item vert">Elément 16</div>
    <div class="item vert">Elément 17</div>
    <div class="item vert">Elément 18</div>
    <div class="item vert petit">Elément 19</div>
    <div class="item vert">Elément 20</div>
    <div class="item vert invisible">Elément 21</div>
    <div class="item vert invisible">Elément 22</div>
    <div class="item vert">Elément 23</div>
    <div class="item vert petit">Elément 24</div>
</div>

我需要这样的网格