Utiliser le CSS Grid Layout

La mise en page des grilles est fondamentale pour la conception de sites Web, et le module CSS Grid Layout est l’outil le plus puissant et le plus simple pour sa création. Personnellement, je pense que c’est beaucoup mieux que par exemple Bootstrap.

Le module a également obtenu le support natif des principaux navigateurs (Safari, Chrome, Firefox, Edge) cette année, donc je crois que tous les développeurs frontaux devront apprendre cette technologie dans un avenir pas trop lointain.

Dans ce tutoriel, je vais vous expliquer les bases de CSS Grid Layout le plus rapidement possible. Je laisserai de côté tout ce dont vous ne devrez pas vous soucier tant que vous n’aurez pas compris l’essentiel.

Votre première disposition de grille

Les deux ingrédients de base d’une grille CSS est le parent et les éléments enfants. Le parent est la grille et les éléments sont le contenu à l’intérieur de la grille.

Voici le balisage pour un wrapper avec six div dedans :

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Pour transformer notre wrapper en grille, nous lui donnons simplement un affichage de grille :

.wrapper {
    display: grid;
}

/* Un peu de css pour illustrer le Grid Layout */
.wrapper div {
  background: #fd6769;
  margin: 5px;
  padding: 15px;
  /* TEXTE */
  text-align:center;
  font-family: Helvetica, Arial, Sans-Serif;
  font-size: 20px;
  color: white;
  font-weight: bold;
}

Mais cela ne fait fait rien pour l’instant car nous n’avons pas encore défini à quoi doit ressembler notre grille. Il empile simplement 6 div les unes sur les autres.

See the Pen
Grid Layout Step 1 by Damien Flandrin (@dam62500)
on CodePen.

Pour le rendre bidimensionnel, nous devrons définir les colonnes et les lignes. Créons trois colonnes et deux lignes. Nous utiliserons les propriétés grid-template-columns et grid-template-rows

.wrapper {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 100px 100px;
}

Comme nous avons écrit trois valeurs pour les colonnes grid-template-columns, nous obtiendrons trois colonnes. Nous obtiendrons deux lignes, comme nous avons spécifié deux valeurs pour les lignes grid-template-rows

Les valeurs dictent la largeur de nos colonnes (200px) et la hauteur de nos lignes (100px). Voici le résultat :

See the Pen
Grid Layout Step 2 by Damien Flandrin (@dam62500)
on CodePen.

Pour vous assurer de bien comprendre la relation entre les valeurs et l’aspect de la grille, jetez également un coup d’œil à cet exemple.

.wrapper {
    display: grid;
    grid-template-columns: 200px 300px 200px;
    grid-template-rows: 150px 100px;
}

Essayez de saisir le lien entre le code et la mise en page.

Voici comment ça se passe :

See the Pen
Grid Layout Step 3 by Damien Flandrin (@dam62500)
on CodePen.

Disposition des éléments

La prochaine chose que vous devrez apprendre est comment placer les éléments sur la grille. C’est là que le CSS Grid Layout prend tout son sens, car il est très simple de créer des mises en page.

Créez une grille 3×3, en utilisant le même balisage que précédemment.

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

Il en résultera la mise en page suivante :

See the Pen
Grid Layout Step 4 by Damien Flandrin (@dam62500)
on CodePen.

Notez que nous ne voyons qu’une grille 3×2 sur la page, alors que nous l’avons définie comme une grille 3×3. C’est parce que nous n’avons que six éléments pour remplir la grille. Si nous en avions trois de plus, la rangée du bas serait également remplie, toutefois le module reserve l’espace de la 3éme ligne, c’est pour cette raison que vous avez du vide en dessous de la grille, n’hésitez pas à inspecter l’élément avec votre navigateur pour mieux comprendre.
Pour positionner et redimensionner les éléments, nous les ciblerons et utiliserons les propriétés grid-column-start: et grid-column-end :

.div-1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

Ce que nous disons ici, c’est que nous voulons que le .div-1 commence sur la première ligne de la grille et se termine sur la quatrième ligne de la colonne. En d’autres termes, cela occupera toute la ligne. Voilà comment ça va se passer à l’écran :

See the Pen
Grid Layout Step 5 by Damien Flandrin (@dam62500)
on CodePen.

Si vous ne comprenez pas pourquoi 4 lignes de colonnes alors que nous n’avons que 3 colonnes. Regardez cette image, où j’ai dessiné les lignes des colonnes en noir :

Notez que nous utilisons maintenant toutes les lignes de la grille. Lorsque nous avons fait en sorte que le premier div occupe toute la première rangée, il a poussé le reste des articles vers le bas.

Enfin, j’aimerais montrer une façon plus simple d’écrire la syntaxe ci-dessus :

.div-1 {
    grid-column: 1 / 4;
}

Pour vous assurer que vous avez bien compris ce concept, réorganisons un peu les éléments.

.div-1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.div-3 {
    grid-row-start: 2;
    grid-row-end: 4;
}
.div-4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

Voici à quoi cela ressemble sur la page. Essayez de comprendre pourquoi. Ça ne devrait pas être trop dur si vous avez bien suivi ce tutoriel.

See the Pen
Grid Layout Step 6 by Damien Flandrin (@dam62500)
on CodePen.