Grid: ne marche pas [Fermé]

Signaler
Messages postés
65
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
28 octobre 2017
-
Bonjour,
Je souhaiterais faire une grille avec grid. J'ai précisé la position de mes items, mais ils ne bougent pas: ils restent au même endroit. Que dois-je faire pour qu'ils se positionnent correctement sur ma grille?

Lien: https://jsfiddle.net/1azkpujL/

HTML
<div id="banniere">
  <nav>
    <div id="1">Texte 1</div>
    <div id="2">Texte 2</div>
    <div id="3">Texte 3</div>
    <div id="4">Texte 4</div>
    <div id="5">Texte 5</div>
    <div id="6">Texte 6</div>
    <div id="7">Texte 7</div>
  </nav>
</div>


CSS
nav
  {
    margin: auto;
    width: 900px;
    height: 350px;
    
    display: grid;
    grid-template-columns: repeat(10, 100px);
    grid-auto-rows: minmax(10, 100px);

    border: 1px solid red;
    position: relative;
  }

    nav div
    {
      border: 1px solid white;
    }
  
      nav div:hover
      {
        background: rgba(255,255,255,0.3);  
      }

      nav a
      {
        color: white;
      }
      
  #1
  {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  
  
 #2
  {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
  }
  
  #3
  {
    grid-column: 1 / 3;
    grid-row: 6 / 8;
  }
  
  #4
  {
    grid-column: 3 / 6;
    grid-row: 6 / 7;
  }
  
  #5
  {
    grid-column: 4 / 7;
    grid-row: 8 / 9;
  }
  
  #6
  {
    grid-column: 3 / 4;
    grid-row: 10 / 11;
  }
  
  #7
  {
    grid-column: 5 / 7;
    grid-row: 1 / 3;
  }


Résultat: