Mise en page personnalisée à l'aide de CSS Grid : cibler des éléments spécifiques

Question

J'ai besoin de reproduire ce design en utilisant CSS Grid, et j'ai essayé de positionner des éléments spécifiques de la grille pour obtenir le résultat, mais sans succès.

C'est ce que j'ai actuellement, je dois corriger quelques choses mais je veux avoir la structure juste avant cela.

Extrait de code ci-joint :

.grid-container {
  display: grid;
  grid-template-columns: repeat(13, minmax(30px, auto));
  gap: 30px;
}

.grid-item {
  background-color: red;
  height: 50px;
  width: 50px;
}

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                             <div class="grid-item"></div>                                        
</div>

J'ai essayé d'utiliser grid-template-rows pour modifier la mise en page sans succès, des suggestions ?

Answer 1

.grid-container {
  display: grid;
  grid-template-columns: repeat(13, minmax(30px, auto));
  grid-template-rows: repeat(5, minmax(30px, auto));
  gap: 10px;
}

.grid-item {
  background-color: red;
  height: 50px;
  width: 50px;
}

.div1 {
  grid-area: 1 / 1 / 4 / 2;
  height: 100%;
}

.div38 {
  grid-area: 4 / 1 / 6 / 2;
  height: 100%;
}

.div39 {
  grid-area: 4 / 2 / 5 / 6;
  width: 100%;
}

.div40 {
  grid-area: 4 / 6 / 5 / 10;
  width: 100%;
}

.div41 {
  grid-area: 4 / 10 / 5 / 14;
  width: 100%;
}

.div42 {
  grid-area: 5 / 2 / 6 / 4;
  width: 100%;
}

.div43 {
  grid-area: 5 / 4 / 6 / 6;
  width: 100%;
}

.div44 {
  grid-area: 5 / 6 / 6 / 8;
  width: 100%;
}

.div45 {
  grid-area: 5 / 8 / 6 / 10;
  width: 100%;
}

.div46 {
  grid-area: 5 / 10 / 6 / 12;
  width: 100%;
}

.div47 {
  grid-area: 5 / 12 / 6 / 14;
  width: 100%;
}