recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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 ?

P粉144705065P粉144705065286 Il y a quelques jours310

répondre à tous(1)je répondrai

  • P粉463418483

    P粉4634184832024-03-29 00:51:23

    .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%;
    }

    répondre
    0
  • Annulerrépondre