首先，抱歉这个问题，这看起来很愚蠢，但我不知道该问谁。 我想基于 或 （或任何最好的）在 html、css （js？） 中制作此图像。 我已经开始了，但是我无法让元素 14 19 和 21 只占据 1/2 的空间。
请帮助我！
我的开始： 索引.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Modèle des grilles</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<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>
</body>
</html>
样式.css
.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;
}
```[I need this](https://i.stack.imgur.com/vyLuR.jpg)