Apprenez CSS Grid en 5 minutes - Un tutoriel pour les débutants

Les mises en page de grille sont fondamentales pour la conception de sites Web, et le module CSS Grid est l'outil le plus puissant et le plus simple pour le créer. Personnellement, je pense que c'est beaucoup mieux que par exemple Bootstrap (lisez pourquoi ici).

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

Dans cet article, je vais vous expliquer les bases de CSS Grid le plus rapidement possible. Je vais laisser de côté tout ce dont vous ne devriez pas vous soucier tant que vous n'avez pas compris les bases.

J'ai également créé un cours gratuit CSS Grid. Cliquez ici pour obtenir un accès complet à

il.

Vous pouvez également consulter cet article, qui explique ce que vous apprendrez tout au long du cours:

Maintenant, sautons dedans!

Votre première disposition de grille

Les deux ingrédients de base d'une grille CSS sont le wrapper (parent) et le

articles (enfants). Le wrapper est la grille réelle et les éléments sont le contenu à l'intérieur de la grille.

Voici le balisage pour un wrapper contenant six éléments:

 1 2 3 4 5 6 

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

grid:

Mais cela ne fait encore rien, car nous n'avons pas défini à quoi nous voulons que notre grille ressemble. Il va simplement empiler 6 div'sles uns sur les autres.

J'ai ajouté un peu de style, mais cela n'a rien à voir avec la grille CSS.

Colonnes et lignes

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-rowet grid-template-column.

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

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

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

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

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

Voici comment cela se passe:

Placer les objets

La prochaine chose que vous devrez apprendre est de savoir comment placer des éléments sur la grille. C'est là que vous obtenez des super pouvoirs, car il est extrêmement simple de créer des mises en page.

Créons une grille 3x3, en utilisant le même balisage qu'avant.

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

Cela se traduira par la disposition suivante:

Remarquez, nous ne voyons qu'une grille 3x2 sur la page, alors que nous l'avons définie comme une grille 3x3. C'est parce que nous n'avons que six éléments pour remplir la grille. Si nous en avions trois de plus, la ligne la plus basse serait également remplie.

Pour positionner et redimensionner les éléments, nous les ciblerons et utiliserons les propriétés grid-columnet grid-row:

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

Ce que nous disons ici, c'est que nous voulons que item1 commence sur la première ligne de la grille et se termine sur la quatrième ligne de colonne. En d'autres termes, cela occupera toute la ligne.

Voici comment cela se déroulera à l'écran:

Êtes-vous confus pourquoi nous avons 4 lignes de colonnes alors que nous n'avons que 3 colonnes? Jetez un œil à cette image, où j'ai dessiné les lignes de colonne en noir:

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

Enfin, j'aimerais montrer une manière plus simple d'écrire la syntaxe ci-dessus:

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

.item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } 

Voici à quoi cela ressemble sur la page. Essayez de comprendre pourquoi cela ressemble à cela. Ça ne devrait pas être trop dur.

Et c'était tout!

Merci d'avoir lu! Je m'appelle Per Borgen, je suis le co-fondateur de Scrimba - le moyen le plus simple d'apprendre à coder. Vous devriez consulter notre bootcamp de conception de sites Web réactifs si vous souhaitez apprendre à créer un site Web moderne à un niveau professionnel.