Mise en page en grille en CSS : un rapide guide pour démarrer

La façon dont nous créons des mises en pages sur le web est en train de changer, et le plus important de ces changements sont les Grilles CSS. Ce rapide guide de démarrage va passer les détails et les nuances, et va plutôt vous aider à vous décoincer, dès maintenant.

Votre navigateur

La mise en page en grilles en CSS (plus connu sous le nom de « Grille » est encore en développement, et vous ne trouverez donc qu'un support des navigateurs plutôt mauvais pour le moment. Pour l'utiliser dès maintenant, vous allez avoir besoin IE11 (bien qu'il utilise une ancienne version des specs), Microsoft Edge, Chrome Canary ou Firefox Nightly.

L'approche la plus simple est peut être d'activer les Fonctionnalités Web Expérimentales dans Chrome : chrome://flags/#enable-experimental-web-platformfeatures.

Mettre en place une grille

Les grilles nous permettent d'arranger les éléments d'une page, selon des régions créées par des guides.

Terminologie

Pour faire simple, ces guides ou lignes de grilles, encadrent horizontalement et verticalement des tracés de grilles. Ces tracés servent de lignes et de colonnes, avec des gouttières entre elles. Lorsque des tracés de grilles horizontales et verticales s'interceptent, cela donne des cellules, comme celles qu'on utilise dans les tableaux. Il est important de comprendre tous ces termes.

Dans l'image suivante vous verrez une grille de démo, montrant :

1. des lignes de grille
2. des colonnes
3. des lignes
4. des cellules

Pour une mise en page graphique, ça paraîtra plus familier si on utilise exactement la même grille, mais qu'on écrase quelques tracés pour donner des gouttières entre les contenus.

1. gouttières

Il reste un terme que l'on doit clarifier avant de continuer :

1. une zone de la grille

Une zone de la grille est n'importe quelle partie de la grille entourée de 4 lignes de grille; elle peut contenir autant de cellules que possible.

Il est temps de construire cette grille dans un navigateur ! On va commencer par un peu d'HTML.

Le HTML de la grille

Pour recréer la grille de ci-dessus, on a besoin d'un conteneur; celui que vous voulez :

<section class="grid-1">

</section>

Dans celui-ci on va placer 9 éléments enfants.

<section class="grid-1">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
  <div class="item-7">7</div>
  <div class="item-8">8</div>
  <div class="item-9">9</div>
</section>

Utilisez ce pen de démarrage si vous voulez suivre tout au long. J'y ai ajouté quelques styles basiques pour différencier visuellement chaque partie de la grille.

Les règles de la grille

D'abord on a besoin de déclarer que notre élément conteneur est une grille, en utilisant une nouvelle valeur pour la propriété display :

.grid-1 {
  display: grid;
}

Bon, ça c'était facile. Ensuite, on a besoin de définir notre grille, en définissant combien de tracés elle va avoir, horizontalement et verticalement. On fait cela avec les propriétés grid-template-columns et grid-template-rows :

.grid-1 {
  display: grid;
  grid-template-columns: 150px 20px 150px 20px 150px;
  grid-template-rows: auto 20px auto 20px auto;
}

Vous remarquerez valeurs pour chaque. Les valeurs de grid-template-columns définissent que « la première colonne doit être large de 150px, la deuxième de 20px, la troisième de 150px », et ainsi de suite pour les 5 colonnes, ce qui correspond plus ou moins à notre image du drapeau finlandais. Les 5 valeurs de grid-template-rows définissent quelque chose de similaire. Chacune serait auto par défaut, en prenant en compte la hauteur du contenu, mais on veut être plus précis avec nos gouttières, en leur donnant une hauteur de 20px, donc on doit lister les 5 lignes.

Chacun de nos éléments s'est vu automatiquement assigné une zone dans l'ordre chronologique. C'est pas mal, mais qu'est-ce qui est arrivé aux éléments 2, 4 et 7 ? Ils ont disparu dans les gouttières verticales, parce que nos gouttières sont des tracés parfaitement légitimes et c'est là que la mise en page les placera si on n'est pas plus spécifiques. Il est temps d'ajouter des règles à nos éléments.

Règles des éléments

La syntaxe disponible à ce point peut être un peu complexe, mais on va le rendre simple en utilisant une propriété de raccourci. On va commencer avec notre premier élément, en déclarant que l'on veut qu'il commence à grid-column 1 et grid-row 1 :

.item-1 {
  grid-column: 1;
  grid-row: 1;
}

Notre élément va automatiquement remplir l'espace minimum disponible entre les lignes de la grille. Notre deuxième élément est un peu moins évident. On veut aussi qu'il commence en grid-row 1, mais on veut aussi qu'il passe grid-column 2 et commence plutôt en grid-column 3. La deuxième colonne sera vide de manière à créer notre gouttière.

.item-2 {
  grid-column: 3;
  grid-row: 1;
}

On continue comme ça, en sautant les colonnes et les lignes de nos gouttières, et en finissant avec le 9ème élément :

.item-9 {
  grid-column: 5;
  grid-row: 5;
}

Conclusion

Et voilà, vous êtes prêt à utiliser les Grilles ! Récapitulons les 4 étapes essentielles :

1. Créer un élément conteneur, et le déclarer avec display: grid;.
2. Utiliser ce même conteneur pour définir tous les tracés en utilisant les propriétés grid-template-rows et grid-template-columns.
3. Placer les éléments dans le conteneur.
4. Spécifier où chaque élément doit être sur la grille en déclarant grid-column et grid-row.

Dans la prochaine partie de cette série, on regardera plus profondément la syntaxe des Grilles, en améliorant de cette façon la manière de définir nos gouttières, en explorant les mises en pages flexibles, l'unité fr, la fonction repeat(), et en amenant notre simple grille bien plus loin. À plus !

Ressources utiles sur les grilles

• @rachelandrew : suivez Rachel Andrew et c'est ce dont vous avez besoin.