Prérequis

Vous n'avez pas besoin de prérequis particulier si ce n'est la connaissance des balises html et quelques notions de css.

0. Introduction

Utiliser "Grid" en CSS est une alternative à Flexbox qui peut s'avérer très utile pour construire une section quadrillée ou même un page complète.

Je trouve, à titre personnel que "Grid", n'est que trop peu utilisé et c'est bien dommage car flex ne semble pas toujours logique en fonction de la tâche à effectuer.

Dans certains cas (que nous allons développer), vous verrez à quel point "Grid" peut se montrer très utile et encore plus quand il est combiné avec flex ! Sortez votre éditeur on est parti !

1. Fabriquer sa première grille

1.1 Le conteneur de grille

Dans votre éditeur, nous allons créer un premier boitier qui va contenir notre grille. Pour cet exemple, j'utiliserais la classe "grid-container". C'est simple, c'est clair et comme ca, on s'y retrouvera.

<div class="grid-container">
</div>

Ce boitier représente notre grille dans laquelle nous allons placer nos éléments. Pour ce faire, nous avons besoin, par le biais du CSS, de lui dire qu'il doit se comporter comme une grille.

Pour cela, il nous faut utiliser la propriété CSS "display", comme ceci :

.grid-container {
  display: grid;
}

Voilà, votre boitier sait qu'il doit afficher les éléments qu'il contient dans une grille.

Et là vous allez me dire :
"Oui mais... Il n'y a rien dedans...".
Et vous avez parfaitement raison ! Nous allons donc remédier à ce problème sur le champ !

1.2 Le contenu de la grille

Allez on ressort l'éditeur et on continue. Nous allons ajouter 2 boitiers dans notre grille.

<div class="grid-container">
  <div class="first element"></div>
  <div class="second element"></div>
</div>

Super, on a du contenu dans notre grille ! Mais on ne le voit pas encore... Pas de panique, ca arrive.
Nous avons dit à notre boitier qui contient la grille qu'il devait s'affichait comme tel, mais nous ne lui avons pas précisé combien de ligne ou même de colonnes il devait afficher.
Eh oui ! Il faut lui préciser !

1.3 grid-template-columns

Dans notre cas précis, je veux que ma grille se compose de deux colonnes. Je souhaite aussi que la première colonne prenne 70% de l'espace disponible et la seconde 30%.

Pour cela rien de plus simple. Je retourne dans mon CSS, et je vais éditer encore une fois mon ".grid-container" et je lui ajoute la propriété suivante :

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

Rajoutez aussi le code suivant pour afficher le rendu de votre grille :

/* a déclarer tout au début de votre css*/

html, body, .grid-container { height: 100%; margin: 0; }


/*Ici le ">" va venir pointer un élement enfant. 
Tandis que le "*" veut simplement dire "TOUS". 
Pour faire simple, j'ai ciblé tous les éléments enfants 
du conteneur ".grid-container;"*/

.grid-container > * {
  border: 1px solid red;
}

Ca y est ! nous voyons enfin un résultat concret !
Mais bon, concrètement, ca veut dire quoi cette ligne de code ?

  grid-template-columns: repeat(2, 1fr);

Eh bien c'est très simple. cette propriété va nous permettre de créer des colonnes !

"Mais ca veut dire quoi "repeat(2, 1fr);" ?"

Calme toi Ghislaine, j'y viens.

Ca veut simplement dire je créé 1 colonne d'une taille de "1fr", et je répète l'opération deux fois. Ce qui me donne deux colonnes.
Cette unité, fr, représente une fraction de l'espace disponible dans le conteneur de la grille.

Il y a une autre façon de l'écrire, un peu plus embêtante selon moi, mais qui fait très bien l'affaire :

grid-template-columns: 1fr 1fr;

Bon, voilà nous avons notre grille, mais je souhaitais qu'une de mes colonnes fasses 70% et l'autre 30%.
Encore une fois, rien de plus simple :

.grid-container {
  display: grid;
  grid-template-columns: 70% 30%;
}

Nous avons bien notre grille d'affichée, elle a les bonnes proportions, mais nous pouvons faire mieux !
Si on utilise un système de fraction on peut simplifier notre grille. 70% et 30%, ca représente respectivement 2/3 et 1/3.
Vous vous souvenez de l'unité "fr" qu'on a vu juste au dessus ?
eh bien on va l'utiliser pour fractionner notre grille. Ce qui doit vous donner :

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

Et voilà ! Vous avez créé votre première grille !
Nous allons pouvoir passer au chapitre suivant et voir jusqu'où on peut aller avec 'Grid'.