1
votes

Comment empêcher mes éléments de grille de disparaître lorsqu'on leur attribue un attribut de style "Zone de grille"

Je crée une page contenant les détails des employés de l'entreprise. mon problème est que j'ai essayé de donner à mes éléments de grille un attribut de style "zone de grille" afin que je puisse utiliser le "nom de grille" lors de la définition de mes zones de modèle de grille pour mon conteneur. mais soudain mes objets disparaissent. Que dois-je faire pour résoudre le problème?

 .container{
         border-right: 2px solid grey;
         border-left: 2px solid grey;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         grid-gap: 10px;
         justify-items: center;
         margin-top: 100px; 
         grid-template-areas {
         "head head head"
         "  .  side  ."
         "foot foot foot";
    }
   }



.grid-1{
     display: grid;
     grid-area: head;
}
 .grid-2{
        display: grid;
        grid-area: side;

   }
    .grid-3{
        display: grid;
        grid-area: foot;
   }

Je m'attends à ce que la sortie de ma grille continue de s'afficher quel que soit l'attribut de style "grid-area" utilisé mais il disparaît. p>

css css-grid

1 commentaires

Sauf si vous utilisez un type de préprocesseur CSS, vous ne pouvez pas imbriquer des sélecteurs CSS comme ça.

3 Réponses :

1
votes

En regardant cette documentation, je vois un segment qui dit:

Pour commencer, vous devez définir un élément de conteneur comme une grille avec display: grid , définir la taille des colonnes et des lignes avec grid-template-columns et grid-template-rows , puis placez ses éléments enfants dans la grille avec grid-column et grid-row .

Je vois votre utilisation de grid-template-columns mais aucune des grid-template-rows . Changer .container pour inclure grid-template-rows peut aider, quelque chose comme ceci (pour trois lignes):

.container{
         border-right: 2px solid grey;
         border-left: 2px solid grey;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         grid-template-rows: 1fr 1fr 1fr;
         grid-gap: 10px;
         justify-items: center;
         margin-top: 100px; 
         grid-template-areas: "head head head"
                              "  .  side  ."
                              "foot foot foot";
}

2 commentaires

J'ai essayé de le faire mais les éléments continuent de disparaître.

Je vais voir si je peux reproduire le problème.

2
votes

Votre syntaxe pour grid-template-area est incorrecte. La valeur ne doit pas être entourée d'accolades, mais doit ressembler à ceci:

<div class="container">
 <div class="grid-1">Header</div>
 <div class="grid-2">Side</div>
 <div class="grid-3">Footer</div>
</div>

 .container{
  height: 400px;
  width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  grid-template-areas: "head head head"
                       "  .  side  ."
                       "foot foot foot";
}

.grid-1{
  display: grid;
  grid-area: head;
  background-color: pink;
}
 .grid-2{
  display: grid;
  grid-area: side;
  background-color: blue;
}
.grid-3{
  display: grid;
  grid-area: foot;
  background-color: green;
}

1 commentaires

@Japhheth Les éléments de l'extrait de code que j'ai partagé ne disparaissent pas. Si vous rencontrez toujours un problème, vous devrez peut-être partager davantage de votre code

1
votes

Semble fonctionner en corrigeant la faute de frappe dans grid-template-areas et en définissant grid-auto-rows . Je suggérerais d'examiner une autre propriété CSS qui pourrait être à l'origine du problème car ce que vous avez fourni fonctionne assez bien avec des correctifs mineurs.

<div class="container">
  <div class="grid-item grid-1">Head</div>
  <div class="grid-item grid-2">Side</div>
  <div class="grid-item grid-3">Foot</div>
</div>

.container {
  border-right: 2px solid grey;
  border-left: 2px solid grey;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
  justify-content: center;
  grid-template-areas: "head head head" ".  side  ." "foot foot foot";
}

.grid-item {
  border: 1px solid black;
}

.grid-1 {
  grid-area: head;
  display: grid;
}

.grid-2 {
  grid-area: side;
  display: grid;
}

.grid-3 {
  grid-area: foot;
  display: grid;
}

1 commentaires

Heureux de vous aider :)