Article original : Complete CSS Grid Tutorial with Cheat Sheet 🎖️

Aujourd'hui, nous allons apprendre les propriétés CSS Grid afin que vous puissiez créer vos propres sites web responsives. Je vais expliquer comment chaque propriété de Grid fonctionne, accompagné d'une aide-mémoire qui couvre tout ce que vous pouvez faire avec Grid. C'est parti. 🎖️

Table des matières :

Architecture CSS Grid
Tableau CSS Grid
Propriétés parent de Grid
Propriétés enfant dans CSS Grid
Raccourcis pour Grid
Conclusion

Vous pouvez également regarder ce tutoriel sur YouTube si vous le souhaitez :

D'abord, qu'est-ce que CSS Grid ?

Alt Text

Grid est un plan pour créer des sites web.

Le modèle Grid vous permet de disposer le contenu de votre site web. Non seulement cela, il vous aide à créer les structures dont vous avez besoin pour construire des sites web responsives pour plusieurs appareils. Cela signifie que votre site aura une belle apparence sur ordinateur, mobile et tablette.

Voici une simple démonstration que j'ai créée en utilisant Grid comme plan principal.

Vue Ordinateur

Alt Text

Vue Mobile

Alt Text

Architecture CSS Grid

Alors, comment fonctionne l'architecture Grid ? Les éléments Grid [Contenus] sont distribués le long de l'axe principal et de l'axe transversal. En utilisant diverses propriétés Grid, vous pouvez manipuler les éléments pour créer vos mises en page de site web.

architecture grid

Au fait, vous pouvez joindre plusieurs lignes et colonnes, comme dans le logiciel Excel, ce qui vous donne plus de flexibilité et d'options que Flexbox.

Au fait, voici une aide-mémoire que j'ai faite pour Flexbox si vous voulez en savoir plus à ce sujet.

Tableau CSS Grid

Alt Text

Ce tableau contient toutes les propriétés possibles que vous pouvez utiliser lorsque vous utilisez grid. Les propriétés Grid sont divisées en :

Propriétés parent
Propriétés enfant

Note : Le texte en rouge désigne les propriétés raccourcies :

Alt Text

À la fin de ce tutoriel, vous aurez une compréhension claire de la façon d'utiliser toutes ces propriétés.

Comment configurer le projet

Alt Text

Pour ce projet, vous devez connaître un peu de HTML, CSS, et comment travailler avec VS code. Suivez-moi pendant que nous complétons les tâches suivantes :

Créez un dossier nommé "Project-1" et ouvrez VS Code
Créez les fichiers index.html et style.css
Installez Live Server et exécutez-le.

Ou, vous pouvez simplement ouvrir Codepen et commencer à coder.

À la fin de ce tutoriel, vous serez en mesure de créer des mises en page de sites web précises et belles.

Et... nous sommes prêts ! Commençons à coder. 😊

Alt Text

HTML

Créez trois boîtes à l'intérieur de la balise body, comme ceci 👍

<div class="container">
  <div class="box-1"> A </div>
  <div class="box-2"> B </div>
  <div class="box-3"> C </div>
</div>

CSS

Étape 1

Nettoyons nos styles par défaut du navigateur. Suivez-moi 👍

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

Étape 2

À l'intérieur du sélecteur body, faites ces ajustements :

body {
  font-family: sans-serif;
  font-size: 40px;
  width: 100%;
  min-height: 100vh;
}

Étape 3

Maintenant, stylisons nos boîtes en les sélectionnant toutes ensemble ->

[class^="box-"] {
  background-color: skyblue;

/* Pour placer la lettre au centre */
  display: grid;
  place-items: center;
}

Note : Ne vous inquiétez pas, nous discuterons de ces propriétés grid en détail plus tard.

Étape 4

Maintenant, placez quelques écarts entre nos boîtes comme ceci 👍

.container {
  display: grid;
  gap: 20px;
}

Mais attendez....

Alt Text

Avant de commencer, vous devez comprendre la relation entre les classes parent et enfant.

Alt Text

Pour la propriété parent Grid, nous écrirons à l'intérieur de la classe .container. Pour la propriété enfant Grid, nous écrirons dans les classes .box-*.

Propriétés parent de CSS Grid

Alt Text

Tout d'abord, apprenons les propriétés parent de CSS Grid !

La propriété grid-template-columns

Vous utilisez cette propriété pour définir le nombre et la largeur des colonnes. Vous pouvez soit définir individuellement la largeur de chaque colonne, soit définir une largeur uniforme pour toutes les colonnes en utilisant la fonction repeat().

Alt Text

Alt Text grid-template-columns

Pour recréer ces résultats, écrivez les lignes CSS suivantes ->

.container {
  display: grid;
  gap: 20px;

/*  Changez les valeurs     👍 pour expérimenter */
  grid-template-columns: 200px auto 100px;
}

Note :

Les valeurs en pixels seront une mesure exacte. Le mot-clé "auto" couvrira l'espace disponible.
Si vous utilisez fr (unité de fraction) comme unité de mesure, toutes les boîtes seront de taille égale.

La propriété grid-template-rows

Vous utilisez cette propriété pour définir le nombre et la hauteur des lignes. Vous pouvez soit définir individuellement la hauteur de chaque ligne, soit définir une hauteur uniforme pour toutes les lignes en utilisant la fonction repeat().

Alt Text

Alt Text grid-template-rows

Pour tester ces résultats, écrivez le code CSS suivant ->

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

/* Changez les valeurs  👍 pour expérimenter */
  grid-template-rows: 200px auto 100px;
}

La propriété grid-template-areas

Vous utilisez cette propriété pour spécifier la quantité d'espace qu'une cellule de grille doit occuper en termes de colonnes et de lignes à travers le conteneur parent. La vie est beaucoup plus facile avec cette propriété car elle nous permet de voir visuellement ce que nous faisons.

Alt Text Mise en page standard 12X12

Appelons cela le plan (template) de notre mise en page 👍

Alt Text Le plan

Pour expérimenter avec cela, vous devez comprendre à la fois les propriétés parent et enfant :

grid-template-areas : La propriété parent qui créera le plan
grid-area : la propriété enfant qui suivra le plan.

D'abord, créez le plan

Comme ceci 👍 à l'intérieur de la classe parent .container :

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-areas: 
    "A A A A   A A A A   A A A A"
    "B B B B   B B B B   B B C C"
    "B B B B   B B B B   B B C C";
}

Implémentez le plan

Ciblez toutes nos classes enfant .box-* et définissez les valeurs comme ceci ->

.box-1{
  grid-area: A;
}
.box-2{
  grid-area: B;
}
.box-3{
  grid-area: C;
}

Note : Je discuterai à nouveau de la propriété grid-area dans la section des propriétés enfant de grid.

La propriété column-gap

Vous utilisez cette propriété pour placer un écart entre les colonnes à l'intérieur de la grille 👍

Alt Text column-gap

Pour tester cela, écrivez ce qui suit en CSS 👍

.container {
  display: grid;
  height: 100vh;

  grid-template-columns: 100px 100px 100px;
//Changez les valeurs 👍 pour expérimenter
  column-gap:  50px;
}

Note : column-gap fonctionne avec grid-template-columns.

La propriété row-gap

Vous utilisez cette propriété pour placer un écart entre les lignes à l'intérieur de la grille 👍

Alt Text row gap

Testons cela 👍

.container {
  display: grid;
  height: 100vh;

  grid-template-rows: 100px 100px 100px;
// Changez   👍  les valeurs pour expérimenter
  row-gap:  50px;
}

Note : row-gap fonctionne avec grid-template-rows.

La propriété justify-items

Vous utilisez cette propriété pour positionner les éléments de grille (enfants) à l'intérieur des conteneurs de grille le long de l'axe X [axe principal]. Les 4 valeurs sont 👍

Alt Text

Alt Text justify-items

Si vous voulez tester cela, ajoutez 1 boîte supplémentaire à l'intérieur du HTML ->

<div class="container">

  <!--Autres boîtes - A, B, C sont ici-->

  <div class="box-4"> D </div>
</div>

et dans le CSS ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// chaque boîte fait 200px par 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Changez les valeurs 👍  pour expérimenter
  justify-items : end;
}

La propriété align-items

Vous utilisez cette propriété pour positionner les éléments de grille (enfants) à l'intérieur du conteneur de grille le long de l'axe Y [axe transversal]. Les 4 valeurs sont 👍

Alt Text align-items

Ne changez rien dans le HTML, mais dans le CSS écrivez ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// chaque boîte fait 200px par 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Changez les valeurs 👍  pour expérimenter
  align-items: center;
}

La propriété justify-content

Vous utilisez cette propriété pour positionner votre grille [Basiquement tout] à l'intérieur du conteneur de grille le long de l'axe X [axe principal]. Les 7 valeurs sont 👍

Alt Text

Alt Text justify-content

Ne changez rien dans le HTML, mais dans le CSS écrivez ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// chaque boîte fait 200px par 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Changez  les valeurs  👍  pour expérimenter
  justify-content: center;
}

La propriété align-content

Vous utilisez cette propriété pour positionner notre grille [Basiquement tout] à l'intérieur du conteneur de grille le long de l'axe Y [axe transversal]. Les 7 valeurs sont 👍

Alt Text

Alt Text align-content

Ne changez rien dans le HTML, mais dans le CSS écrivez ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// chaque boîte fait 200px par 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Changez  les valeurs 👍 pour expérimenter
  align-content : center;
}

Faites une pause

Jusqu'à présent, tout va bien ! Faites une pause, vous la méritez.

Alt Text

Propriétés enfant de CSS Grid

Alt Text

Maintenant, examinons les propriétés enfant de Grid.

L'échelle CSS Grid

J'ai créé cette échelle de grille pour démontrer les calculs de la façon dont les lignes et les colonnes sont jointes ensemble. Nous pouvons utiliser l'un des 2 types de mesure :

Le chiffre [1,2,3,4, etc...]
Le mot-clé span

Alt Text L'échelle de la grille

Vous aurez une image claire de la façon dont ce guide fonctionne ✱ lorsque nous écrirons du code dans un court instant.

L'illustration ci-dessous 👍 montre les points de départ et de fin des lignes et des colonnes d'une seule cellule.

Alt Text Colonne et ligne de la grille -> points de départ et de fin

HTML

Pour expérimenter avec l'échelle de la grille et comprendre les propriétés suivantes, créez 4 boîtes à l'intérieur de la balise body :

<div class="container">
  <div class="box-1"> A </div>
  <div class="box-2"> B </div>
  <div class="box-3"> C </div>
  <div class="box-4"> D </div>
</div>

Nous allons utiliser la fonction repeat(). Elle répète notre code un certain nombre de fois. Voici un exemple 👍

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

Ceci ✱ est l'équivalent d'écrire ceci : 👍

grid-template-columns : 1fr 1fr 1fr 1fr 1fr ;

Une note rapide

Alt Text

Lorsque nous utilisons l'unité fr [ Fraction ], nous divisons la zone de l'écran en proportions égales.

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

Ce ✱ code divise notre largeur d'écran en 5 parties égales.

Nous sommes prêts, commençons !

Les propriétés grid-column : start/end

Vous utilisez ces deux propriétés pour joindre plusieurs COLONNES ensemble. C'est un raccourci de 2 propriétés :

grid-column-start
grid-column-end

Écrivez ce code dans votre CSS :

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

Le résultat ressemble à ceci :

Alt Text

Ici, nous divisons notre écran [à la fois la largeur et la hauteur] en 12 parties égales. 1 boîte occupe 1 partie, ou vous pouvez l'appeler 1fr [1 fraction]. Les 8 fractions restantes le long de la largeur sont vides.

Comme nous traitons des propriétés enfant, nous devons cibler nos classes .box-* comme ceci :

.box-1{}
.box-2{}
.box-3{}
.box-4{}

Vous pouvez expérimenter avec l'une ou toutes ces boîtes, je vais rester avec .box-1.

Apportons notre échelle de grille. Nous traitons avec les colonnes – concentrez-vous simplement sur les colonnes, pas sur les lignes.

Alt Text L'échelle de la grille

L'échelle par défaut de chaque classe .box-* est :

grid-column-start : 1;
grid-column-end : 2;

/* Le raccourci -> */
 grid-column : 1 / 2

Nous pouvons écrire ceci ✱ en unité span également, comme ceci 👍

grid-column : span 1;

Attribuons les 8 fractions vides à .box-1 comme ceci 👍

.box-1{
grid-column : 1/10
}

Le résultat ressemble à ceci : 👍

Alt Text

Une note rapide

Alt Text

Comment ai-je fait le calcul ? La box-1 occupe elle-même 1 boîte. Et par-dessus cela, nous ajoutons 8 boîtes supplémentaires. À la fin, vous devez ajouter 1 pour indiquer la fin, donc 8+1+1 = 10.

Comment utiliser le mot-clé span

Si vous êtes confus avec la première propriété, vous pouvez utiliser le mot-clé span car il est plus facile à comprendre.

Nous devons ajouter 8 boîtes à .box-1 qui occupe déjà une boîte. Donc, nous devons faire 8+1 = 9.

.box-1{
  grid-column : span 9;
}

Cela va produire le même résultat.

Les propriétés grid-row : start/end

Vous utilisez ces deux propriétés pour joindre plusieurs LIGNES ensemble. C'est un raccourci de 2 propriétés :

grid-row-start
grid-row-end

Expérimentons avec ! Ici, je vais rester avec .box-1, et voici notre guide de grille. Maintenant, concentrez-vous uniquement sur l'échelle des lignes, pas sur les colonnes.

Alt Text L'échelle de la grille

Joignons 9 boîtes à .box-1 le long de la ligne.

Écrivez ce code : 👍

.box-1{
  grid-row : 1/11;
}

Le calcul ressemble à ceci -> .box-1 contient 1 boîte, et vous ajoutez 9 boîtes supplémentaires, plus un 1 obligatoire à la dernière position pour indiquer la fin, ce qui vous donne 9+1+1=11.

Voici l'alternative 👍 en utilisant le mot-clé span :

.box-1{
  grid-row : span 10;
}

Et voici ce calcul -> .box-1 contient 1 boîte, et vous ajoutez 9 boîtes supplémentaires 9+1=10.

Voici le résultat jusqu'à présent : 👍

Alt Text

La propriété grid-area

Tout d'abord, nous devons configurer grid-template-areas ✱ Une fois que nous avons fait cela, nous devons spécifier les noms utilisés dans la classe parent à l'intérieur des classes enfants, comme ceci : 👍

Alt Text Mise en page standard 12X12

Ensuite, nous devons spécifier grid-template-areas à l'intérieur du conteneur parent : 👍

Alt Text

Comme ceci 👍 à l'intérieur de la classe parent :

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-areas: 
    "A A A A   A A A A   A A A A"
    "B B B B   B B B B   B B C C"
    "B B B B   B B B B   B B C C";
}

Ensuite, nous spécifions les noms utilisés dans le conteneur parent à l'intérieur des classes enfants avec grid-areas 👍

Alt Text

Comme ceci 👍 à l'intérieur des classes enfants :

.box-1{
  grid-area: A;
}
.box-2{
  grid-area: B;
}
.box-3{
  grid-area: C;
}

La propriété justify-self

Vous utilisez cette propriété pour positionner 1 individu grid-item (enfant) à l'intérieur d'un conteneur de grille le long de l'axe X [axe principal]. Les 4 valeurs sont 👍

Alt Text Justify-self

Écrivez ce code pour expérimenter avec les valeurs 👍

.container {
  display: grid;
  gap :25px;
  height: 100vh;

/* // chaque boîte a une taille égale */
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

Souvenez-vous ! Cela ne fonctionne que sur les classes enfants. Donc, ciblez n'importe quelle classe .box-*. Je vais cibler la première boîte :

.box-1 {
/*  Changez les valeurs 👍  pour expérimenter */
  justify-self : start;  
}

La propriété align-self

Vous utilisez cette propriété pour positionner 1 individu grid-item (enfant) à l'intérieur d'un conteneur de grille le long de l'axe Y [axe transversal]. Les 4 valeurs sont 👍

Alt Text align-self

Expérimentons avec les valeurs 👍

.container {
  display: grid;
  gap :25px;
  height: 100vh;

/* // chaque boîte a une taille égale */
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

Souvenez-vous ! Cela ne fonctionne que sur les classes enfants. Donc, ciblez n'importe quelle classe .box-*. Je vais cibler la 1ère boîte :

.box-1 {
/*  Changez les valeurs 👍  pour expérimenter */
  align-self : start;  
}

Raccourcis pour les propriétés CSS Grid

Alt Text

Examinons ces propriétés raccourcies de Grid :

place-content
place-items
place-self
grid-template
gap / grid-gap

place-content

Alt Text place-content

Ceci est le raccourci de 2 propriétés :

align-content
justify-content

Un exemple

align-content : center;
justify-content : end;

/* Le raccourci */
place-content : center / end ;

place-items

Alt Text place-items

Ceci est le raccourci de 2 propriétés :

align-items
justify-items

Un exemple

align-items : end;
justify-items : center;

/* Le raccourci */
place-items : end / center ;

place-self

Alt Text place-self

Ceci est le raccourci de 2 propriétés :

align-self
justify-self

Un exemple

align-self : start ;
justify-self : end ;

/* Le raccourci */
place-self : start / end ;

grid-template

Alt Text grid-template

Ceci est le raccourci de 2 propriétés :

grid-template-rows
grid-template-columns

Un exemple

grid-template-rows : 100px 100px;
grid-template-columns : 200px 200px;

/* Le raccourci */
grid-template : 100px 100px / 200px 200px;

gap/grid-gap

Gap et grid-gap sont la même chose et font le même travail. Vous pouvez utiliser l'un ou l'autre.

Alt Text gap

Ceci est le raccourci de 2 propriétés :

row-gap
column-gap

Un exemple

row-gap : 20px ; 
column-gap : 30px ;

/* Le raccourci */
gap : 20px  30px;

Crédits

Licornes
Corgis, kat

Conclusion

Maintenant, vous pouvez créer en toute confiance des mises en page de sites web responsives en utilisant vos connaissances sur la grille !

Voici votre médaille pour avoir lu jusqu'à la fin ❤️

Suggestions et critiques sont grandement appréciées ❤️

Alt Text

YouTube / Joy Shaheb

LinkedIn / Joy Shaheb

Twitter / JoyShaheb

Instagram / JoyShaheb