Affichage en grille (display:grid)

• Le gridLayout CSS permet de décomposer le contenu d'une boite en lignes et en colonnes (sous forme de grille ou de tableau).
• La taille des pistes (lignes ou colonnes) est totalement configurable.
• Une boite de type gridLayout est constituée d'items qui peuvent être placées de manière absolue ou en mode automatique.
• Le nombre de lignes ou le nombre de colonnes peut être ajusté automatiquement.
• Exemples :
  • Application au code HTML suivant :

    <div class="maGrille">
    <div>Un</div>
    <div>Deux</div>
    <div>Trois</div>
    <div>Quatre</div>
    <div>Cinq</div>
    </div>
    

  • Code css :

    .maGrille {
    display: grid;
    width: 450px
    }
    

    .maGrille > div{
    border-radius: 5px;
    border: mediumblue thin solid;
    }
    

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinq
  • Code css :

    .maGrille {
    display: grid;
    grid-template-columns: 150px 150px 150px;
    }
    

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinq
• L'unité fr permet de décomposer une ligne sous forme de fractions d'espace disponible, ainsi :
  • le code suivant décompose la largeur totale disponible en fraction de 1/6, la troisième colonne se voit affecté 2/6 de la largeur totale
  • Code css :

    .maGrille {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
    }
    

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinq
  • Pour en savoir plus
• Il est possible de gérer la hauteur des lignes avec la propriété grid-auto-rows
  • Code css :

    .maGrille {
    display: grid;
    grid-template-columns: 50px 1fr 2fr; // différentes unités de mesure possible
    grid-auto-rows : 75px;
    }
    

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinq
  • Pour en savoir plus
• Les propriétés row-gap et column-gap permettent de définir un espacement entre les lignes et les colonnes :
  • Code css :

    .maGrille {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-auto-rows : 50px;
    gap : 12px 50px; // raccourci pour row-gap column-gap
    }
    

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinq