CSS Grid, le guide complet en vidéo
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
3h03
de formation
40
leçons vidéo
7
chapitres
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

CSS Grid, le guide complet en vidéo

4.8/5 Trustpilot (1385 avis) Satisfait ou remboursé
3h03
de formation
40
leçons vidéo
7
chapitres

Dans cette formation en vidéo, je vous propose un guide complet sur l'apprentissage d'une nouveauté en CSS : la CSS Grid (ou grille CSS en français). Cette nouvelle forme de mise en page CSS n'est pas en concurrence avec Flexbox, mais un complément indispensable à connaître pour tout bon concepteur de site internet du côté Front End !

Note : Si vous ne connaissez pas Flexbox et que vous souhaitez découvrir cette technologie CSS, j'ai également réalisé une formation sur le sujet.
 

Au programme de cette formation CSS Grid en vidéo

Dans cette suite de tutoriels vidéo, vous apprendrez à mettre en place très facilement une grille virtuelle à l'aide de nouvelles propriétés CSS. Le but de cette grille sera de caler des contenus très simplement, sur l'écran.

Les propriétés CSS ainsi que leurs différentes valeurs seront étudiées tout au long de ce tuto complet afin de vous permettre de savoir réaliser des mises en page rapides et faciles grâce à cette nouvelle technologie !

Après la théorie, une séance d'entraînement vous sera proposée afin de bien assimiler les propriétés CSS nouvellement apprises.

Nous terminerons ce tuto par un exercice dont je mets les sources à votre disposition. 
Enfin un QCM vous sera proposé pour tester vos nouvelles compétences ! Je reste bien évidemment disponible dans le salon d'entraide pour répondre à vos éventuelles questions. 

A la fin de ce tuto, les grilles CCS seront pour vous un véritable jeu d'enfant !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Présentation
Chapitre 2
Le conteneur et ses propriétés
Chapitre 3
Les contenus et leurs propriétés
Chapitre 4
Autres propriétés
Chapitre 5
Déplacement des contenus
Chapitre 6
Consolidation des nouveaux acquis
Chapitre 7
Création d'une maquette d'un site responsive

Table des matières

Chapitre 1 : Présentation

11m56
 
Leçon 1Introduction
Leçon 2Grid et inline-grid

Chapitre 2 : Le conteneur et ses propriétés

41m35
 
Leçon 1Mise en place du conteneur et des contenus
Leçon 2Et flexbox ?
Leçon 3Création des colonnes
Leçon 4Gestion de la hauteur des lignes
Leçon 5Complèment d'informations
Leçon 6Les gouttières
Leçon 7Une nouvelle unité de mesure
Leçon 8La fonction repeat

Chapitre 3 : Les contenus et leurs propriétés

16m50
 
Leçon 1Les lignes de grilles verticales
Leçon 2Les lignes de grilles horizontales
Leçon 3Le mot clé span
Leçon 4Propriétés raccourcies

Chapitre 4 : Autres propriétés

30m21
 
Leçon 1Changer le sens d'affichage
Leçon 2Créer une colonne virtuelle
Leçon 3Créer une ligne virtuelle
Leçon 4Petit exercice de rappel
Leçon 5Définition des zones
Leçon 6La fonction minmax
Leçon 7La propriété order

Chapitre 5 : Déplacement des contenus

16m39
 
Leçon 1Présentation
Leçon 2Alignement de la grille sur l'axe horizontal
Leçon 3Alignement de la grille sur l'axe vertical
Leçon 4Alignement de tous les contenus
Leçon 5Alignement d'un contenu

Chapitre 6 : Consolidation des nouveaux acquis

43m53
 
Leçon 1Intro
Leçon 2Q.R. 1 à 4
Leçon 3Q.R. 5 à 8
Leçon 4Q.R. 9 à 12
Leçon 5Q.R. 13 à 16
Leçon 6Q.R. 17 à 20
Leçon 7Q.R. 21 à 24
Leçon 8Q.R. 25 à 28
Leçon 9Conclusion

Chapitre 7 : Création d'une maquette d'un site responsive

22m30
 
Leçon 1Présentation du travail
Leçon 2Mise en place des bases du travail
Leçon 3CSS côté smartphone
Leçon 4CSS côté ordinateur
Leçon 5Conclusion

Avis des apprenants

Détail des avis
361
Apprenants
33
Commentaires
5/5
Note moyenne
5/5
33
4/5
0
3/5
0
2/5
0
1/5
0
Corinne Marchal
Corinne Marchal
Publié le 23/04/2026
Je découvre CSS Grid et j'ai hâte de le mettre en pratique. Tout me paraît clair dans la théorie grâce aux explications.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)
Fred Andenas
Fred Andenas
Publié le 27/01/2026
Tuto passionnant, très bien présenté
Carl Brison
Carl Brison
Merci beaucoup, c'est vraiment très gentil ;-)
Marc Le Person
Marc Le Person
Publié le 28/11/2025
Tuto parfaitement clair et passionnant. Merci.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Les codes sources de l'exercice final.

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
28,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
3h03 de vidéo • 7 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 754 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1421 tutos gratuits

Notre politique de protection des données