Grid CSS. Comment bien structurer une page web avec la propriété grid?

Introduction

Le but principale de cet article est de vous apprendre à utiliser la propriété CSS grid, via un exemple sous forme de maquette d’un site web afin de bien la maîtriser.

Grace à cet outil CSS nous allons pouvoir faire la mise en page, l’habillage, l’agencement et la disposition de nos différents éléments sur notre page web d’une manière simple.

Créé en 2011, CSS grid est venu étendre les possibilités offertes par le module de tableau CSS table, la propriété float et la propriété flexbox. En guise de rappel la propriété float indique qu'un élément doit être retirer du flux normal et doit être placer sur le coté droit ou sur le coté gauche de son conteneur.

Qu’est-ce que grid CSS?

Pour comprendre le fonctionnement du module CSS grid, il faut imaginer une grille composée de colonnes et de lignes. L’intersection entre les colonnes et les lignes forme les cellules. Une ou plusieurs cellules occupées par un meme élément forment une zone.

Cette grille est le conteneur parent qui ne s’affichent pas à l’écran, elle joue le rôle de repère pour placer verticalement et horizontalement les zones de contenu. Chaque zone est un conteneurs fils, positionné sur la grille en indiquant ses coordonnées ,c’est-à-dire les colonnes et les lignes dont il occupe l’espace. Chaque conteneur fils affiche alors son contenu, constitué d’un élément ou d’un groupe d’éléments.

Condition d’utilisation de grid CSS?

Pour utiliser CSS grid, il faut:
• Un conteneur parent : l’élément HTML

prend la propriété CSS display : grid pour se comporter comme une grille.
• Des conteneurs fils : chaque élément inclus dans le conteneur parent constitue une zone de la grille, placée verticalement sur une ou plusieurs colonnes et horizontalement sur une ou plusieurs lignes.

<div class="grille">
        <nav><p>Navbar</p></nav>
        <main><p>Main</p></main>
        <div id="sidebar"><p>Sidbar</p></div>
        <div id="content1"><p>Content1</p></div>
        <div id="content2"><p>Content2</p></div>
        <div id="content3"><p>Content3</p></div>
        <footer>Fooder</footer>
    </div>

Les valeurs que peut prendre la propriété grid

grid-template

Cette valeur définit ce qui inclut « grid-template-columns ». « grid-template-rows » et « grid-template-areas ».

grid-auto-flow

Cette valeur définit qui indique le fonctionnement de l’algorithme de placement automatique et qui détaille exactement comment les éléments placés automatiquement « coulent » dans la grille.

grid-auto-rows

Cette valeur définit qui indique la taille des pistes créées pour les lignes de façons implicite.

grid-auto-columns

Cette valeur définit qui indique la taille des pistes créées pour les colonnes de façon implicite.

Les propriété enrichies

• La propriété grid-template-columns : définit la taille des colonnes.
• La propriété background-color colore l’arrière-plan de la grille, ou l’arrière-plan d’une zone de la grille.
• La propriété color colore le contenu des zones de la grille.
• La propriété grid-gap détermine l’espace entre les zones de la grille.
• La propriété border ajouter une bordure à la grille ou à une zone de la grille. Utiliser les propriétés « start » et « end »

Le propriété our indiquer l’emplacement de c
start et end permettent également d’indiquer l’emplacement de chaque zone, le code CSS renseigne, pour chacune :

• à quelle colonne la zone commence, avec la propriété grid-column-start.
• à quelle colonne la zone s’arrète, avec la propriété grid-column-end.
• à quelle ligne la zone commence, avec la proprété grid-row-start.
• à quelle ligne la zone s’arrète, avec la propriété grid-row-end.

Comment centrer une grille en CSS

Center une grille permet de positionner les zones de manières harmonieuse. Pour ce faire on utilise :

• La propriété align-items indique le positionnement des zones sur l’axe vertical de la grille. La valeur « center » permet de positionner les zones sur l’axe vertical de la grille en créant autant d’espace en haut et en bas à l’intérieur de la grille.
• La propriété justify-items indique le positionnement des zones sur l’axe horizontal de la grille. La valeur « center » permet de positionner les zones au centrer de la grille en créant autant d’espace à gauche et à droite à l’intérieur de la grille.

Utiliser les propriété raccourcies

Les propriété raccourcies permettent de rédiger plus rapidement le code CSS, et améliorent sa lisibilité. Au lieu de renseigner le début et la fin de chaque ligne et de chaque colonne de la grille avec quatre propriétés distinctes, il suffit d’utiliser les propriétés raccourcies grid-column et grid-row, et de leur attribuer deux valeurs à chacune.

Utiliser la propriété grid-area

Cette propriété raccourcit encore le code CSS grid. Au lieu de mentionner les lignes et les colonnes, la propriété grid-area suffit à déterminer l’espace occupé par chaque zone. La propriété grid-area fonctionne avec quatre valeurs :

• La première correspond au début de la ligne.
• La deuxième correspond au début de la colonne.
• La troisième correspond à la fin de la ligne.
• La quatrième correspond à la fin de la colonne.

Personnaliser la disposition des zones

Dans les exemples précédents, chaque zone occupe une seule « case » de la grille. Pour personnaliser la disposition des zones, afin de créer une mise en page plus attractive, il faut ajouter les valeurs des propriétés grid-column et grid-row.

Voici le code CSS où nous utilisons les propriétés grid pour structurer une page en partant du code HTML précédent:

}
.grille{
    display: grid;
    height: 100vh;
    grid-template-columns: 10fr 10fr 10fr 10fr;
    grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
    grid-template-areas: 
    "nav nav nav nav"
    "sidebar main main main"
    "sidebar content1 content2 content3"
    "sidebar footer footer footer";
    grid-gap: 0.2rem;
    font-family: sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    color: #717475;
}

La propriété grid-templates-area prend des valeurs qui sont les éléments HTML et qui doivent être préciser par la propriété qui s'applique aux éléments fils grid-aria de la manière suivante:

nav{
    background: #a7ffeb;
    grid-area: nav;
    border-radius: 5px;
    align-items: center;

}

main{
    background: #0e4848;
    grid-area: main;
    border-radius: 5px;
    padding-top:5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sidebar{
    background: #18ffff;
    grid-area: sidebar;
    border-radius: 5px;
    padding-top:5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#content1{
    background: #6fffd2;
    grid-area: content1;
    border-radius: 5px;
    padding-top:5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#content2{
    background: #64ffda;
    grid-area: content2;
    border-radius: 5px;
    padding-top:5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#content3{
    background: #73ffba;
    grid-area: content3;
    border-radius: 5px;
    padding-top:5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer{
    background: #1de9b6;
    grid-area: footer;
    border-radius: 5px;
    padding-top:5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

Ainsi nous avons notre page web bien stucturé.
L’en-tête de la page au dessus,