Le petit guide des grilles CSS

Contrairement à une brochure qui sera imprimée plusieurs fois mais toujours sur le même format de page, un site web peut prendre un format différent dépendant de l’écran du visiteur. Depuis l’invention du CSS en 1996, il n’existait pas de solution définitive… jusqu’à l’invention des grilles CSS en 2015 ! Comme le nom l’indique, elles permettent de placer ses éléments facilement, aisément, en quelques minutes, comme on le souhaite et exactement ou on le souhaite. Un vrai régal !

Considérez ce guide comme une feuille de notes : revenez-y lorsque vous oubliez le nom d’une classe ou son sélecteur.

Introduction des grilles CSS

Premièrement, je pars du principe que vous connaissez suffisamment d’HTML et de CSS pour suivre ce guide.

Les grilles CSS consistent à diviser sa page en lignes et en colonnes, un peu comme un tableau ! On donne la taille que l’on souhaite à ses cases, et on crée autant de lignes et de colonnes que nécessaire. Une fois que nos cases vierges sont mises en place, on peut commencer à les remplir vraiment comme on le souhaite.

Jusqu’en 2015, il fallait utiliser des méthodes acceptées mais qui sont techniquement fausses — par exemple placer deux <div> dans un <div>, lequel sert seulement à contenir les deux enfants ! On rajoute du code superflu : l’idéal aurait bien sûr été de ne pas avoir besoin de ce <div> parent… mais l’HTML et le CSS ne permettaient pas d’éviter cet élément.

C’est désormais complètement différent avec les grilles CSS ! En plus, elles vous permettent d’écrire moins de code, sans forcément utiliser des classes (je pense par exemple aux classes à rallonge de Bootstrap, par exemple <div class= »col-12 col-md-5 col-lg-3 float-right »>).

Il n’y a aucune raison de se priver d’utiliser les grilles car, d’une part, elles gèrent uniquement la disposition des éléments : tout ce que vous utilisiez déjà en CSS fonctionne aussi sur les grilles. De plus, tous les navigateurs (dont IE11 et Edge) ont entièrement intégré les grilles : il n’y a donc aucun problème de comptabilité !

Un exemple de grille

Nous utiliserons cette grille comme fil rouge du petit carnet. Si vous avez besoin de vous rafraichir la mémoire, vous pouvez seulement regarder le schéma puis descendre au niveau du code pour comprendre exactement le fonctionnement. Voici donc la grille de cet exercice, réalisée entièrement en HTML et CSS. J’ai choisi ici de faire apparaître les cases individuelles afin que l’on voit bien la conception. Ces lignes sont donc normalement invisibles.

grille exemple - Le petit guide des grilles CSS

Et voici son code HTML :

<body>
    <div class="content">
        <header>
            <h1>Bienvenue ! Ceci est le titre de ma page avec des mots en trop </h1>
        </header>
        <nav><p>Accueil * Images * En apprendre plus * Etc etc * etc etc</p></nav>
        <aside>
            La citation du jour : <br><br>
            <i> <!-- Lorem Ipsum --> </i>
        </aside>
          <article> <!-- Lorem Ipsum --></article>
        <footer>Tous droits réservés (c) 2018 - www.dcrevoisier.com</footer>
    </div>
</body>

Puis le CSS :

.content {
 display: grid;
 margin: 0 auto;
 background-color: bisque;
 width: 80%;
 grid-template-columns: repeat(12,1fr);
 grid-template-rows: 100px 100px 100px 100px;

 grid-template-areas:
 "header header header header header header header header header header aside aside"
 "nav nav nav nav nav nav nav nav empty empty aside aside"
 "article article article article article empty2 empty2 empty2 empty2 empty2 empty2 empty2"
 "article article article article article empty3 empty3 empty3 footer footer footer footer";
}

header {
 grid-area: header;
 background-color: azure;
}

nav {
 grid-area: nav;
 background-color: cornflowerblue;
}

nav p{
 padding-top:25px;
 padding-left:50px;
}

aside {
 grid-area: aside;
 overflow: hidden;
 background-color: darksalmon;
}

article {
 grid-area: article;
 background-color: darkseagreen;
 overflow:hidden;
}

footer{
 grid-area: footer;
 background-color: brown;
 align-self:end;
 justify-self:end;
}

Ca se complique un peu ? Prenons tout cela depuis le début.

1. Créer la première grille

En premier, il est nécessaire de déclarer un <div> avec une classe qui servira de conteneur. J’ai écrit précédemment que ce genre de manipulation n’était plus nécessaire, mais en fait, il est possible de créer plusieurs grilles sur une page (et il est même possible de créer une grille dans une de grille !). Pour les différencier, il faut donc désigner un conteneur.

En CSS, il suffit simplement de ceci :

.content {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  grid-template-rows: 100px 100px 100px 100px;
}

Et vous êtes partis ! Nous avons pour l’instant dit au conteneur qu’il se comporte comme une grille, qu’il contient 12 colonnes (columns) de « 1fr » de large et 4 lignes (rows) de 100px de haut chacune.

L’unité fr, fraction, permet de donner une taille automatique à chaque colonne. Si on admet que la largeur de .conteneur est 100%, alors chaque colonne prendra 100/12 = 8.33% de la largeur. On peut très bien dire que la première colonne mesure 2fr, auquel cas elle mesurera 16.66% de large. L’intérêt est donc de ne pas devoir calculer ces pourcentages soi-même.

2. Remplir sa grille

Avec les grilles, pas forcément besoin de classes spécifiques ! On peut tout à fait utiliser les balises HTML standard. Ainsi, pour ajouter le header dans la grille :

header {
  grid-column: 1/11;
  grid-row: 1/2;
}

Ce code est différent de celui que j’ai utilisé pour la grille d’exemple, car il existe deux manières de remplir une grille (je préfère justement celle plus haut, mais les deux ont leurs utilités). Cette syntaxe est un peu étrange mais pourtant logique. Si nous reprenons l’image d’exemple, il existe bien 12 cases. Mais en comptant 1/11, on ne compte pas les cases mais les bordures de cases ! Ainsi, en commencant par la bordure extérieure gauche, on compte 11 séparations (il y en a 13 au total sur chaque ligne).

La deuxième méthode consiste à créer une « aire » de grille, c’est le système que j’ai utilisé pour celle-ci. D’abord, on définit notre aire dans le .conteneur :

.content {
//reste du CSS
grid-template-areas:
 "header header header header header header header header header header aside aside"
 "nav nav nav nav nav nav nav nav empty empty aside aside"
 "article article article article article empty2 empty2 empty2 empty2 empty2 empty2 empty2"
 "article article article article article empty3 empty3 empty3 footer footer footer footer";
}

Puis, toujours dans le css, on attribue le nom de la zone à nos éléments :

header {
 grid-area: header;
 background-color: azure;
}

nav {
 grid-area: nav;
 background-color: cornflowerblue;
}

La classe grid-template-areas permet de créer des zones plus visuelles. On place chaque ligne entre guillemets, et on indique la position des colonnes par rapport aux cellules. Par exemple, on voit sur l’exemple que <nav> prend bien 8 cases de large et que <article> chevauche deux lignes.

La classe grid-area prend le nom que l’on souhaite, mais il se réfère obligatoirement à grid-template-areas. J’ai décidé de nommer mes aires selon leur balise, mais tout est permi.

Petite particularité : les zones sont obligatoirement rectangulaires, il est impossible de leur donner une forme telle que le L. De plus, il est obligatoire de remplir sa grille entière avec des aires, on ne peut par exemple pas juste désigner la position du header. C’est pour cela que j’ai des aires empty : elles ne sont pas déclarées dans le CSS ou l’HTML.

3. Les grilles en responsive design

On n’y passe plus : aujourd’hui, un site qui n’est pas adaptatif pour les écrans de smartphone est pénalisé dans son référencement, passe à côté d’1/3 de ses clients potentiels… bref, il faut concevoir ses sites pour les natels !

Avant les grilles, il fallait définir des media-queries dans le CSS, passer tous ses éléments en taille de pourcentage, et certainement ajouter 2-3 div conteneurs par-ci par-là (bien que la méthodologie mobile-first aidait un peu). Aujourd’hui, avec les grilles, on peut simplement redéfinir ses colonnes et ses lignes, puis redessiner une grid-template-areas en combinaison avec les media-queries ! On peut donc utiliser une grille plus petite pour les smartphones, et une grille plus large pour les écrans de bureau.

Du côté de la page HTML, il n’y à rien à modifier. D’ailleurs, j’aurais pu déclarer le <header> après le <footer> : ma grille l’aurait quand même placé au bon endroit (copiez le code et essayez !).

4. Aller plus loin avec les grilles

De nouveau dans l’exemple, vous verrez que j’ai ajouté du padding à nav et que j’ai utilisé une classe justify-self et align-self au footer. C’était uniquement pour vous montrer que les classes CSS usuelles sont toujours utilisables avec les grilles. Justify- et align-self sont toutefois spécifiques aux grilles (et à flexbox) : elles permettent d’aligner l’élément horizontalement et verticalement, respectivement, au début, au milieu, ou à la fin. Il est aussi possible d’ajouter des gouttières entre chaque case, que l’on pourrait apparenter à margin.

Pour aller encore plus loin, je conseille ce site qui présente les différentes classes CSS utilisées par les grilles. Vous verrez qu’il est possible de paramétrer ses grilles de différentes manières, et même de les laisser se remplir automatiquement.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.