Guide de débutant pour le CSS - Grid Layout

Bonjour là-bas, future star du design web ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde du CSS Grid Layout. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - je serai votre guide attentionné, et nous avancerons pas à pas. À la fin de ce tutoriel, vous serez capable de créer des layouts élégants et réactifs comme un pro !

Qu'est-ce qu'un Grid Layout ?

Imaginez que vous arrangez du mobilier dans une pièce. Vous pourriez mentalement diviser l'espace en lignes et colonnes pour vous aider à organiser tout proprement. C'est essentiellement ce que fait le CSS Grid Layout pour les pages web !

Le CSS Grid Layout est un outil puissant qui nous permet de créer des layouts bidimensionnels sur les pages web. C'est comme avoir une grille invisible sur votre page web où vous pouvez placer le contenu exactement où vous le souhaitez. Génial, non ?

Éléments de la grille

Avant de plonger dedans, familiarisons-nous avec quelques termes clés :

1. Conteneur de grille : C'est l'élément parent qui contient tous les éléments de la grille.
2. Éléments de la grille : Ce sont les enfants du conteneur de la grille.
3. Lignes de la grille : Les lignes divisant la structure de la grille.
4. Voies de la grille : Les espaces entre les lignes de la grille (lignes ou colonnes).
5. Cellule de la grille : L'intersection d'une ligne et d'une colonne.
6. Zone de la grille : Un espace rectangulaire entouré de quatre lignes de la grille.

Ne vous inquiétez pas si ces termes semblent confus maintenant. Nous les verrons en action bientôt !

Propriété Display Grid

Commençons par un exemple simple. Disons que nous voulons créer une grille de base 3x3. Voici comment nous ferions :

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}

.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}

Reprenons cela :

1. Nous mettons display: grid; sur le conteneur pour activer le Grid Layout.
2. grid-template-columns: auto auto auto; crée trois colonnes de largeur égale.
3. Nous style les éléments de la grille pour les rendre visibles.

Voilà ! Vous venez de créer votre premier layout de grille. Combien c'est excitant !

Lignes et Colonnes de la Grille

Maintenant, penchons-nous un peu plus précisément sur nos lignes et colonnes. Nous pouvons définir des tailles exactes :

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

Cela crée une grille avec :

• Trois colonnes : 100px, 200px, et 100px de large
• Deux lignes : 80px et 200px de hauteur

Vous pouvez également utiliser différents unités comme les pourcentages ou la nouvelle unité fr (fraction de l'espace disponible) :

.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
}

Cela crée un layout similaire, mais les colonnes se redimensionneront fluidement en fonction de l'espace disponible.

Écart de la Grille

Parfois, vous souhaitez un peu d'espace entre vos éléments de la grille. C'est là que rentre en jeu grid-gap :

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}

Cela ajoute un écart de 10px entre toutes les lignes et colonnes. Vous pouvez également définir des écarts de lignes et de colonnes séparément :

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 10px;
grid-column-gap: 20px;
}

Lignes de la Grille CSS

Souvenez-vous de ces lignes de la grille dont nous avons parlé plus tôt ? Nous pouvons les utiliser pour positionner nos éléments avec précision :

<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 300px 100px;
gap: 10px;
}

.item1 {
grid-column: 1 / span 4;
}

.item2 {
grid-row: 2 / span 2;
}

.item3 {
grid-column: 2 / span 2;
}

.item4 {
grid-column: 4;
grid-row: 2;
}

.item5 {
grid-column: 2 / span 3;
grid-row: 3;
}

Cela crée un layout complexe avec un header en pleine largeur, un menu latéral, une zone de contenu principal, une barre latérale droite et un pied de page. Jouez avec ces valeurs pour voir comment elles affectent le layout !

Référence des Propriétés CSS Grid

Voici un tableau pratique des propriétés CSS Grid courantes :

Propriété	Description
display: grid;	Définit un conteneur de grille
grid-template-columns	Spécifie le nombre et les tailles des colonnes
grid-template-rows	Spécifie le nombre et les tailles des lignes
grid-gap	Définit l'écart entre les éléments de la grille
grid-column-start	Spécifie où commencer l'élément de la grille
grid-column-end	Spécifie où finir l'élément de la grille
grid-row-start	Spécifie où commencer l'élément de la grille
grid-row-end	Spécifie où finir l'élément de la grille
grid-area	Spécifie la taille et l'emplacement des éléments de la grille

Et voilà ! Vous avez刚刚 pris vos premiers pas dans le merveilleux monde du CSS Grid Layout. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec différents layouts et propriétés. Avant de vous en rendre compte, vous créerez des layouts complexes et réactifs avec facilité.

Bonne programmation, futurs maîtres de la grille !

Credits: Image by storyset