Centrer sa grille dans la page et la rendre responsive

1/3/2022 ☼ grid ☼ grille ☼ responsive

Niveau : ★★☆☆☆

Les sites de Jens Simmons et CSS Tricks sont des excellentes ressources pour continuer à travailler avec CCS Grid.

1 - Le résultat dans la page

See the Pen Centrer la grille dans la page by Nicolas Tilly (@nicolastilly) on CodePen.

Dans cet exercice il s’agit de placer la grille au centre de la fenêtre. Ce principe de mise en page est très intéressant quand on a des contenus (et une grille) avec des proportions fixes (par exemple une grille de photos en carré).

Cette méthode implique que la grille soit responsive afin que les dimensions fixes de celle-ci s’adaptent à une taille d’écran plus petit (comme un smartphone par exemple).

2 - Le code html

<section>

    <div id="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

</section>

3 - Le code CSS

/*optionnel*/
body {
    overflow: hidden;
}

/*La section sert à centrer le container (grille) dans la page avec flexbox*/
section {
    height: 100vh;/*on prend en compte l'entièreté de la hauteur de la page*/
    display: flex;
    justify-content: center;
    align-items: center;
}

/*la grille*/
#container {
    display: grid;
    border: 5px solid #616161; /*une bordure autour du container*/
    grid-template-columns: 200px 200px 200px;/*chaque case dans la grille fait 200px de haut et 200px de large*/
    grid-template-rows: 200px 200px 200px;
}

/*pour afficher des bordures aux divs dans la grille*/
#container div {
    border: 1px solid #616161;
}

Pour rendre responsive votre grille on utilise le media queries. Il s’agit d’une spécification CSS3 qui permet d’adapter le contenu en fonction de conditions particulières (affichage d’une page Web sur un ordinateur, un smartphone, une TV, une tablette, pour l’impression…).

le code CSS responsive

/*le media queries pour adpater l'affichage de la grille sur un smartphone. Ici on change la taille des cellules qui passent de 200px à 100px. */
@media only screen and (max-width: 767px) { 
        #container {
                grid-template-columns: 100px 100px 100px;
                grid-template-rows: 100px 100px 100px;
        }
}