Accueil » Grilles CSS (CSS Grid) : Techniques modernes pour des mises en page complexes
html css

Grilles CSS (CSS Grid) : Techniques modernes pour des mises en page complexes

Apprenez CSS Grid étape par étape : créez des grilles flexibles, responsives et modernes pour des mises en page innovantes et performantes.

CSS Grid est un système de mise en page puissant et moderne conçu pour créer des structures de page complexes de manière simple et intuitive. Contrairement aux approches traditionnelles comme les tableaux HTML ou les frameworks CSS externes, CSS Grid permet de positionner les éléments avec précision en utilisant des lignes et des colonnes.

Caractéristiques clés :

  • Disposition bidimensionnelle : CSS Grid permet de gérer les alignements aussi bien horizontalement que verticalement.
  • Flexibilité : Idéal pour des conceptions modernes et responsives.
  • Support natif : Compatible avec tous les navigateurs modernes (dernières versions).

Pourquoi utiliser CSS Grid pour vos mises en page ?

  1. Simplicité : CSS Grid réduit la complexité des mises en page complexes en gérant les relations entre les éléments.
  2. Adaptabilité : Fonctionne parfaitement avec des tailles dynamiques et des écrans de toutes dimensions.
  3. Alignement précis : Vous pouvez aligner vos éléments de manière centrée, étirée ou personnalisée sans effort supplémentaire.
  4. Gain de temps : CSS Grid réduit la nécessité d’utiliser des hacks CSS ou du JavaScript pour le positionnement.

Différences entre CSS Grid et Flexbox

CSS Grid Flexbox
Idéal pour des dispositions 2D (lignes et colonnes). Optimisé pour des dispositions 1D (ligne ou colonne unique).
Gère les espaces entre plusieurs éléments simultanément. Gère les relations entre éléments adjacents uniquement.
Utilise un système basé sur des lignes et colonnes explicites. Fonctionne avec un système d’alignement fluide et flexible.
Exemples : galeries d’images, pages complexes. Exemples : menus de navigation, boutons.

Exemple visuel : CSS Grid vs Flexbox

CSS Grid : Organisation en lignes et colonnes.

				
					<h1>Bienvenue dans CSS Grid</h1>
    <div class="grid-container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>


				
			
				
					/* CSS Grid pour organiser les éléments */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 20px;
    background-color: #f4f4f4;
}

.item {
    background-color: #ccc;
    text-align: center;
    padding: 20px;
    border: 1px solid #333;
}
Introduction à CSS Grid

Flexbox : Organisation en une seule direction.

				
					<div class="flex-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

				
			
				
					.flex-container {
    display: flex;
    gap: 10px;
}
.item {
    background-color: #ccc;
    padding: 20px;
    text-align: center;
}
Introduction à CSS Grid

CSS Grid est la solution incontournable pour créer des mises en page flexibles et modernes. Bien que Flexbox reste utile pour des alignements simples, CSS Grid s’impose dès qu’une gestion bidimensionnelle est nécessaire.

Tableau comparatif : CSS Grid vs Flexbox

Définition de chaque conteneur :

CSS Grid (grid-container) Flexbox (flex-container)
Gère une disposition bidimensionnelle (lignes et colonnes). Gère une disposition unidimensionnelle (ligne ou colonne).
Idéal pour des mises en page globales comme des galeries ou tableaux. Idéal pour aligner des éléments comme des boutons ou menus.

Disposition :

CSS Grid Flexbox
Gère les lignes et colonnes simultanément. Gère une seule direction (ligne ou colonne).
Exemple : Grilles de produits, mises en page complexes. Exemple : Barre de navigation ou alignement horizontal de boutons.

Positionnement des éléments :

CSS Grid Flexbox
Les éléments peuvent être positionnés explicitement (ex. : grid-column, grid-row). Les éléments sont alignés automatiquement selon l’ordre HTML (modifiable avec order).
Exemple : Étendre un élément sur plusieurs colonnes ou lignes. Exemple : Réorganiser l’ordre des éléments dans une barre horizontale.

Alignement des éléments :

CSS Grid Flexbox
Utilise align-items pour l’alignement vertical et justify-items pour l’alignement horizontal. Utilise align-items pour l’alignement croisé et justify-content pour l’alignement principal.
Exemple : Centrer les éléments dans une grille de produits. Exemple : Distribuer uniformément des boutons dans une ligne.

Concepts de base de CSS Grid

Comprendre la terminologie de CSS Grid

Avant de plonger dans les exemples pratiques, il est essentiel de se familiariser avec le vocabulaire de CSS Grid :

  1. Grid Container (conteneur de grille) : L’élément parent qui contient tous les éléments de la grille. C’est sur cet élément que vous appliquez les propriétés CSS Grid.
  2. Grid Items (éléments de grille) : Les enfants directs du conteneur de grille. Ce sont eux qui sont positionnés à l’intérieur de la grille.
  3. Grid Lines (lignes de grille) : Les lignes qui divisent la grille en colonnes et lignes, numérotées de manière implicite.
  4. Grid Tracks (pistes de grille) : Les colonnes ou lignes entre deux lignes de grille.
  5. Grid Cell (cellule de grille) : L’espace occupé par une intersection entre une colonne et une ligne.
  6. Grid Area (zone de grille) : Un groupe de cellules de grille formant une région rectangulaire.

Voici une représentation visuelle simple :

Comprendre la terminologie de CSS Grid

Mise en place d’un conteneur CSS Grid

Pour commencer à utiliser CSS Grid, définissez un conteneur de grille en utilisant la propriété display: grid.

Exemple :

				
					<div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

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

.item {
    background-color: #ccc;
    text-align: center;
    padding: 20px;
}

Les unités dans CSS Grid

CSS Grid introduit des unités spécifiques pour une flexibilité maximale :

  1. fr (fraction) : Unité proportionnelle pour partager l’espace disponible.

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

Cela crée une grille où la deuxième colonne est deux fois plus large que les autres.

auto : La taille est calculée en fonction du contenu.

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

minmax() : Définit une plage de tailles minimale et maximale.

				
					grid-template-columns: minmax(150px, 1fr);

repeat() : Répète un motif sans avoir à l’écrire plusieurs fois.

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

Exemple pratique : Disposition de base avec CSS Grid

				
					<div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

				
			
				
					.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes égales */
    grid-template-rows: 100px auto; /* Première ligne 100px, deuxième en fonction du contenu */
    gap: 15px; /* Espacement entre les éléments */
}

.item {
    background-color: #add8e6;
    text-align: center;
    padding: 10px;
    font-size: 18px;
}
Grille avec unités fr (fraction)

Résumé du chapitre :

  • Grid Container : L’élément parent activant CSS Grid.
  • Unités importantes : fr, auto, minmax(), repeat().

Propriétés pour le conteneur de grille

CSS Grid offre des propriétés puissantes pour structurer les grilles. Ces propriétés s’appliquent au conteneur de grille (l’élément parent).

grid-template-columns et grid-template-rows

Ces propriétés définissent le nombre de colonnes et de lignes, ainsi que leurs dimensions.

Syntaxe :

				
					grid-template-columns: <valeur>;
grid-template-rows: <valeur>;

Exemples :

Trois colonnes de tailles égales :

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

Deux colonnes, l’une deux fois plus large :

				
					grid-template-columns: 1fr 2fr;

Colonnes et lignes avec tailles fixes et dynamiques :

				
					grid-template-columns: 100px auto 1fr;
grid-template-rows: 50px 200px auto;

gap, row-gap et column-gap

Ces propriétés gèrent l’espacement entre les éléments de la grille.

gap : Définit l’espace entre les lignes et colonnes.

				
					gap: 20px;

row-gap et column-gap : Spécifient séparément l’espace entre les lignes et les colonnes.

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

Exemple :

				
					.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px; /* Espacement uniforme */
}

grid-auto-flow

Contrôle l’ordre de remplissage des éléments dans la grille.

row (par défaut) : Les éléments se remplissent ligne par ligne.

				
					grid-auto-flow: row;

column : Les éléments se remplissent colonne par colonne.

				
					grid-auto-flow: column;

dense : Remplit automatiquement les espaces vides.

				
					grid-auto-flow: column;

Exemple pratique : Disposition flexible avec gap et auto-flow

Deux colonnes par ligne avec un espacement de 20px.

				
					<div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

				
			
				
					.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes égales */
    gap: 20px; /* Espacement entre les éléments */
    grid-auto-flow: row; /* Remplit les lignes en priorité */
}

.item {
    background-color: #f0a500;
    text-align: center;
    padding: 20px;
    font-size: 18px;
}
CSS Grid propriétés pour le conteneur de grille

Résumé du chapitre :

  • grid-template-columns/rows : Pour définir la structure de base des grilles.
  • gap : Simplifie la gestion des espaces entre éléments.
  • grid-auto-flow : Contrôle la manière dont les éléments se remplissent.

Propriétés pour les éléments de la grille

Les éléments individuels d’une grille (grid items) peuvent être positionnés et dimensionnés de manière précise à l’aide de plusieurs propriétés.

grid-column et grid-row

Ces propriétés définissent la position et l’étendue des éléments sur les colonnes et les lignes.

Syntaxe :

				
					grid-column: start / end;
grid-row: start / end;
  • start : Numéro de ligne ou de colonne de début.
  • end : Numéro de ligne ou de colonne de fin (non inclus).

Exemples :

Étendre un élément sur 2 colonnes :

				
					grid-column: 1 / 3;

Étendre un élément sur 3 colonnes :

				
					grid-row: 1 / 4;

En pratique :

				
					<div class="grid-container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
</div>


				
			
				
					.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes de taille égale */
    grid-template-rows: 100px 100px;      /* 2 lignes de 100px */
    gap: 10px;                            /* Espacement entre les éléments */
    background-color: #1c1c1c;            /* Couleur de fond sombre du conteneur */
    padding: 10px;
}

.item {
    text-align: center;
    color: white;                         /* Texte en blanc pour contraste */
    font-size: 18px;
    padding: 20px;
    border-radius: 5px;
}

.item1 {
    grid-column: 1 / 3;                   /* Étend sur les colonnes 1 et 2 */
    grid-row: 1 / 2;                      /* Occupe la première ligne */
    background-color: #ff5733;           /* Couleur rouge foncé */
}

.item2 {
    grid-column: 2 / 4;                   /* Étend sur les colonnes 2 et 3 */
    grid-row: 2 / 3;                      /* Occupe la deuxième ligne */
    background-color: #33a1ff;           /* Couleur bleue foncée */
}

.item3 {
    grid-column: 1 / 2;                   /* Occupe uniquement la première colonne */
    grid-row: 2 / 3;                      /* Occupe la deuxième ligne */
    background-color: #2ecc71;           /* Couleur verte foncée */
}

Explication du code :

  • grid-template-columns: repeat(3, 1fr);
    • Définit une grille avec 3 colonnes de largeur égale. L’unité 1fr signifie qu’elles partagent également l’espace disponible.
  • grid-template-rows: 100px 100px;
  • Crée deux lignes de hauteur fixe, chacune mesurant 100 pixels.
  • gap: 10px;
  • Ajoute un espacement de 10 pixels entre chaque élément de la grille (horizontalement et verticalement).
  • .item1 { grid-column: 1 / 3; grid-row: 1 / 2; }
      • grid-column: 1 / 3 : L’élément s’étend de la première colonne à la troisième, couvrant ainsi deux colonnes.
      • grid-row: 1 / 2 : L’élément est positionné sur la première ligne.
  • .item2 { grid-column: 2 / 4; grid-row: 2 / 3; }
      • grid-column: 2 / 4 : L’élément commence à la deuxième colonne et s’étend jusqu’à la quatrième, couvrant deux colonnes.
      • grid-row: 2 / 3 : L’élément est positionné sur la deuxième ligne.
  • .item3 { grid-column: 1 / 2; grid-row: 2 / 3; }
      • grid-column: 1 / 2 : L’élément occupe uniquement la première colonne.
      • grid-row: 2 / 3 : L’élément est positionné sur la deuxième ligne.
  • Couleurs et styles visuels :
  • Chaque élément a une couleur de fond distincte (background-color) pour améliorer la lisibilité :
  • Rouge foncé pour item1
  • Bleu foncé pour item2
  • Vert foncé pour item3
  • Le texte est en blanc (color: white) pour offrir un bon contraste avec les couleurs sombres.
CSS Grid propriétés pour les éléments de la grille

grid-area : Utilisation de noms de zones

La propriété grid-area simplifie la création de mises en page complexes en nommant des zones spécifiques dans une grille. Ces noms permettent de positionner des éléments de manière intuitive et visuelle.

Étape 1 : Définir les zones dans le conteneur

Avec la propriété grid-template-areas, vous définissez un modèle de mise en page en attribuant des noms à chaque zone de la grille. Ces noms sont des chaînes de caractères représentant les emplacements des éléments.

				
					.grid-container {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto auto auto;
}

Étape 2 : Associer des zones aux éléments

Chaque élément de la grille utilise la propriété grid-area pour se placer dans la zone correspondante.

				
					.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Exemple complet : Mise en page simple

				
					<div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
</div>





				
			
				
					.grid-container {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
}

.header {
    grid-area: header;
    background-color: #ffa500;
    text-align: center;
    padding: 10px;
}

.sidebar {
    grid-area: sidebar;
    background-color: #4682b4;
    color: white;
    padding: 10px;
}
				
			
				
					.main {
    grid-area: main;
    background-color: #32cd32;
    padding: 10px;
}

.footer {
    grid-area: footer;
    background-color: #8a2be2;
    color: white;
    text-align: center;
    padding: 10px;
}
CSS Grid propriétés pour les éléments de la grille

Avantages de l’utilisation de noms de zones

  1. Lisibilité accrue : Le modèle de la grille est facile à comprendre et à modifier.
  2. Modularité : Les zones nommées permettent de déplacer ou de réorganiser les éléments sans affecter leur contenu.
  3. Simplicité des mises à jour : Modifier les noms de zones dans le CSS suffit pour changer toute la mise en page.

Alignement des éléments dans la grille

CSS Grid offre des propriétés puissantes pour aligner les éléments individuellement ou pour toute la grille. Ces propriétés permettent de centrer, aligner ou étirer les éléments horizontalement et verticalement, en fonction des besoins.

align-items : Contrôle l’alignement vertical de tous les éléments dans la grille.

La propriété align-items permet de définir comment tous les éléments de la grille (grid items) sont alignés verticalement dans leurs cellules respectives. Elle agit au niveau du conteneur de la grille (grid container).

Valeurs disponibles :

    • start : Aligne les éléments en haut.
    • end : Aligne les éléments en bas.
    • center : Centre les éléments verticalement.
    • stretch (par défaut) : Étire les éléments pour remplir la cellule.
				
					.grid-container {
    display: grid;
    align-items: center; /* Centre verticalement tous les éléments */
}

justify-items : Contrôle l’alignement horizontal de tous les éléments

La propriété justify-items définit l’alignement horizontal de tous les éléments à l’intérieur de leurs cellules dans une grille. Contrairement à justify-content, qui agit sur l’ensemble de la grille, justify-items contrôle l’alignement des éléments individuellement.

Valeurs disponibles :

  • start : Aligne les éléments à gauche.
  • end : Aligne les éléments à droite.
  • center : Centre les éléments horizontalement.
  • stretch (par défaut) : Étire les éléments pour remplir la cellule
				
					.grid-container {
    display: grid;
    justify-items: center; /* Centre horizontalement tous les éléments */
}

align-self : Contrôle l’alignement vertical d’un seul élément

La propriété align-self contrôle l’alignement vertical d’un seul élément de grille à l’intérieur de sa cellule. Elle permet de surcharger l’alignement défini globalement avec align-items pour un élément spécifique.

Valeurs disponibles :

  • start, end, center, stretch.

				
					.item {
    align-self: start; /* Aligne un seul élément en haut */
}

justify-self : Contrôle l’alignement horizontal d’un seul élément

La propriété justify-self permet d’aligner un élément unique horizontalement à l’intérieur de sa cellule dans une grille CSS. Elle ne s’applique qu’à un élément spécifique, contrairement à justify-items, qui agit sur tous les éléments de la grille.

Valeurs disponibles :

  • start, end, center, stretch.

				
					.item {
    justify-self: end; /* Aligne un seul élément à droite */
}

align-content : Contrôle l’espacement vertical entre les lignes de la grille

La propriété align-content contrôle comment les lignes de la grille sont réparties verticalement dans le conteneur lorsqu’il y a plus d’espace disponible que nécessaire. Cette propriété agit sur l’ensemble des lignes et est pertinente uniquement si la grille comporte plusieurs lignes.

Valeurs disponibles :

  • start : Aligne les lignes en haut.
  • end : Aligne les lignes en bas.
  • center : Centre les lignes verticalement.
  • stretch (par défaut) : Étire les lignes pour occuper tout l’espace vertical disponible.
  • space-between : Ajoute un espace uniforme entre les lignes.
  • space-around : Ajoute un espace avec des marges entre les lignes.
  • space-evenly : Distribue les lignes avec un espacement égal.

				
					.grid-container {
    display: grid;
    align-content: space-between; /* Espacement uniforme entre les lignes */
}

justify-content : Contrôle l’espacement horizontal entre les colonnes de la grille.

La propriété justify-content agit sur l’ensemble de la grille (et non sur les éléments individuels) pour déterminer comment les colonnes sont réparties horizontalement lorsque l’espace disponible dépasse la largeur de la grille.

Valeurs disponibles :

  • start : Aligne la grille sur le côté gauche du conteneur.
  • end : Aligne la grille sur le côté droit du conteneur.
  • center : Centre la grille horizontalement dans le conteneur..
  • stretch (par défaut) : Étire les colonnes pour remplir tout l’espace horizontal disponible (par défaut).
  • space-between :Ajoute un espace uniforme entre les colonnes, sans marge aux extrémités.
  • space-around :Ajoute un espace égal autour des colonnes, avec des marges égales des deux côtés.
  • space-evenly : Distribue les colonnes avec un espacement égal entre elles et aux extrémités.

				
					.grid-container {
    display: grid;
    justify-content: center; /* Centre toutes les colonnes horizontalement */
}

Resumé

Propriété Portée Effet
align-items Tous les éléments Aligne verticalement dans la grille
justify-items Tous les éléments Aligne horizontalement dans la grille
align-self Élément individuel Aligne verticalement un seul élément
justify-self Élément individuel Aligne horizontalement un seul élément
align-content Ensemble des lignes Contrôle l’espacement vertical global
justify-content Ensemble des colonnes Contrôle l’espacement horizontal global

Exemple pratique : Alignement des éléments dans une grille 

				
					<div class="grid-container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
</div>





				
			
				
					.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 100px 100px;
    justify-items: center; /* Centre horizontalement tous les éléments */
    align-items: center; /* Centre verticalement tous les éléments */
}

.item {
    background-color: #ffcccb;
    padding: 20px;
    border: 1px solid #000;
}

Chaque élément est centré à la fois horizontalement et verticalement.

CSS Grid propriétés pour les éléments de la grille

Création de mises en page complexes avec CSS Grid

CSS Grid simplifie la création de mises en page sophistiquées et responsives. Voici quelques exemples pratiques adaptés à des scénarios réels.

Exemple 1 : Une mise en page de blog

Objectif : Créer une mise en page classique de blog avec un en-tête, une barre latérale, du contenu principal, et un pied de page.

				
					<div class="blog-layout">
    <header class="header">Header</header>
    <nav class="sidebar">Sidebar</nav>
    <main class="content">Main Content</main>
    <footer class="footer">Footer</footer>
</div>

				
			
				
					.blog-layout {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    grid-template-columns: 1fr 3fr; /* Barre latérale 1/4, contenu principal 3/4 */
    grid-template-rows: auto 1fr auto; /* Hauteur automatique pour l'en-tête et le pied de page */
    gap: 20px; /* Espacement entre les sections */
    padding: 10px;
    background-color: #f0f0f0;
}

.header {
    grid-area: header;
    background-color: #6b5b95;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.sidebar {
    grid-area: sidebar;
    background-color: #88b04b;
    color: #fff;
    padding: 20px;
}

.content {
    grid-area: content;
    background-color: #f7cac9;
    color: #fff;
    padding: 20px;
}

.footer {
    grid-area: footer;
    background-color: #ff6f61;
    color: #fff;
    padding: 20px;
    text-align: center;
}

Résultat :

  • En-tête s’étend sur toute la largeur en haut.
  • Barre latérale à gauche, prenant 1/4 de la largeur.
  • Contenu principal à droite, occupant 3/4 de la largeur.
  • Pied de page s’étend sur toute la largeur en bas.
Création de mises en page complexes avec CSS Grid

Exemple 2: Une galerie d’images responsive

Objectif : Créer une galerie avec des images de tailles égales qui s’adapte à l’écran.

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


				
			
				
					.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Colonnes dynamiques */
    gap: 10px;
    padding: 10px;
    background-color: #eaeaea;
}

.item {
    background-color: #6b5b95;
    color: #fff;
    text-align: center;
    padding: 40px 0;
    font-size: 24px;
    border-radius: 5px;
}

Résultat :

  • Une galerie avec des colonnes dynamiques.
  • Les colonnes s’ajustent pour occuper tout l’espace disponible, chaque cellule ayant une largeur minimale de 150px.
Création de mises en page complexes avec CSS Grid

Exemple 3 : Une page produit e-commerce

Objectif : Créer une page produit avec une image, des détails, et une section de recommandations.

				
					<div class="product-page">
    <div class="image">Product Image</div>
    <div class="details">Product Details</div>
    <div class="recommendations">Recommendations</div>
</div>


				
			
				
					.product-page {
    display: grid;
    grid-template-columns: 2fr 3fr; /* Image : 2/5, Détails : 3/5 */
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "image details"
        "recommendations recommendations";
    gap: 20px;
    padding: 20px;
    background-color: #f4f4f4;
}

.image {
    grid-area: image;
    background-color: #f7cac9;
    padding: 20px;
    text-align: center;
}

.details {
    grid-area: details;
    background-color: #88b04b;
    padding: 20px;
    text-align: center;
}

.recommendations {
    grid-area: recommendations;
    background-color: #ff6f61;
    padding: 20px;
    text-align: center;
}

Résultat :

  • Une grille avec :
    • L’image du produit à gauche.
    • Les détails à droite.
    • Une section de recommandations occupant toute la largeur en dessous.
Création de mises en page complexes avec CSS Grid

Combiner CSS Grid et Flexbox

Bien que CSS Grid soit idéal pour organiser des mises en page bidimensionnelles, Flexbox reste un excellent choix pour des alignements dans une seule dimension (ligne ou colonne). Les deux codes peuvent être combinées pour tirer parti de leurs forces respectives.

Quand utiliser CSS Grid ou Flexbox ?

CSS Grid Flexbox
Conception bidimensionnelle. Conception unidimensionnelle.
Idéal pour les mises en page globales (sections d'une page). Idéal pour l'alignement d'éléments à l'intérieur d'une section.
Définit explicitement des lignes et colonnes. Réagit au contenu pour l'alignement et la flexibilité.

Exemple pratique : En-tête avec CSS Grid et Flexbox

Dans cet exemple, CSS Grid organise les grandes sections de l’en-tête, tandis que Flexbox aligne les éléments secondaires à l’intérieur de chaque section.

				
					<header class="header">
    <div class="logo">Logo</div>
    <nav class="nav">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </nav>
    <div class="actions">
        <button>Sign In</button>
        <button>Register</button>
    </div>
</header>


				
			
				
					.header {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Logo, navigation, actions */
    align-items: center;
    gap: 20px;
    padding: 10px;
    background-color: #f0f0f0;
}

.logo {
    background-color: #6b5b95;
    color: #fff;
    text-align: center;
    padding: 10px;
}

.nav {
    display: flex; /* Utilisation de Flexbox pour la navigation */
    justify-content: center; /* Aligne les liens au centre */
    gap: 15px;
}

.nav a {
    text-decoration: none;
    color: #6b5b95;
    font-weight: bold;
}

.actions {
    display: flex; /* Utilisation de Flexbox pour les boutons */
    justify-content: flex-end; /* Aligne les boutons à droite */
    gap: 10px;
}

.actions button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #88b04b;
    color: #fff;
    cursor: pointer;
}

.actions button:hover {
    background-color: #6b5b95;
}

Résultat :

  • CSS Grid organise les trois sections principales : le logo, la navigation et les boutons d’action.
  • Flexbox aligne les liens de navigation et les boutons à l’intérieur de leurs sections.
Combiner CSS Grid et Flexbox

Exemple pratique : Mise en page complète avec CSS Grid et Flexbox

Objectif : Créer une page avec :

  • Une barre latérale et un contenu principal (CSS Grid).
  • Une barre d’outils dans le contenu principal alignée avec Flexbox.
				
					<div class="layout">
    <aside class="sidebar">Sidebar</aside>
    <section class="main-content">
        <div class="toolbar">
            <button>Option 1</button>
            <button>Option 2</button>
            <button>Option 3</button>
        </div>
        <div class="content">Main Content</div>
    </section>
</div>

</header>


				
			
				
					.layout {
    display: grid;
    grid-template-columns: 1fr 3fr; /* Sidebar 1/4, contenu principal 3/4 */
    grid-template-rows: auto;
    gap: 20px;
    padding: 20px;
    background-color: #eaeaea;
}

.sidebar {
    background-color: #6b5b95;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.main-content {
    background-color: #88b04b;
    color: #fff;
    padding: 20px;
}

.toolbar {
    display: flex; /* Flexbox pour aligner les boutons */
    justify-content: space-between; /* Espacement uniforme entre les boutons */
    margin-bottom: 20px;
}

.toolbar button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #f7cac9;
    color: #fff;
    cursor: pointer;
}

.toolbar button:hover {
    background-color: #ff6f61;
}

.content {
    background-color: #f4f4f4;
    color: #000;
    padding: 20px;
}

Résultat :

  • CSS Grid divise la mise en page en barre latérale et contenu principal.
  • Flexbox organise les boutons dans la barre d’outils avec un espacement uniforme.
Combiner CSS Grid et Flexbox

Grilles CSS avancées

Dans ce chapitre, nous explorons des techniques avancées pour exploiter pleinement la puissance de CSS Grid et créer des mises en page dynamiques et sophistiquées.

Grilles imbriquées (Nested Grids)

Une grille imbriquée est une grille à l’intérieur d’un élément qui est lui-même un élément d’une grille parente. Cela permet de gérer des sous-sections indépendamment.

Pour imbriquer des grilles, on utilise les classes nested-grid et nested-item.

Classe nested-grid

La classe nested-grid est appliquée à l’élément parent d’une sous-grille. Cet élément devient un conteneur de grille, permettant de gérer les lignes et colonnes de cette sous-section.

Caractéristiques principales :

  1. Transforme un élément (comme une div) en conteneur de grille en utilisant display: grid.
  2. Définit la structure de la grille (nombre de colonnes, lignes, espacements, etc.).
  3. Gère les propriétés comme grid-template-columns, gap, et padding pour la sous-grille.
				
					.nested-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Colonnes dynamiques */
    gap: 10px; /* Espacement entre les éléments */
    background-color: #f4f4f4; /* Couleur de fond de la sous-grille */
    padding: 10px; /* Espacement interne pour le conteneur */
}

Détails des propriétés :

  • grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) :
    • Crée autant de colonnes que l’espace disponible le permet.
    • Chaque colonne a une largeur minimale de 100px et maximale de 1 fraction (1fr) de l’espace disponible.
  • gap: 10px : Définit l’espace entre les éléments de la sous-grille.
  • padding: 10px : Ajoute de l’espace à l’intérieur des bords du conteneur.

Classe nested-item

La classe nested-item est appliquée aux enfants directs d’une sous-grille. Chaque nested-item représente un élément de la sous-grille.

Caractéristiques principales :

  1. Donne un style distinct à chaque élément de la sous-grille.
  2. Peut être utilisé pour positionner ou dimensionner un élément dans la sous-grille.
  3. Applique des styles visuels comme la couleur de fond, le texte, et le rembourrage.
				
					.nested-item {
    background-color: #88b04b; /* Couleur de fond spécifique à l'élément */
    color: #fff; /* Couleur du texte */
    padding: 10px; /* Espacement interne pour chaque élément */
    text-align: center; /* Centrer le texte */
    border-radius: 5px; /* Coins arrondis pour un effet esthétique */
}

Détails des propriétés :

  • background-color: #88b04b : Attribue une couleur distincte pour identifier visuellement chaque élément.
  • padding: 10px : Ajoute de l’espace entre le contenu de l’élément et ses bords.
  • text-align: center : Centre le contenu textuel horizontalement.
  • border-radius: 5px : Ajoute des coins arrondis à l’élément.

Exemple

				
					<div class="grid-container">
    <div class="item main">
        <div class="nested-grid">
            <div class="nested-item">1.1</div>
            <div class="nested-item">1.2</div>
            <div class="nested-item">1.3</div>
        </div>
    </div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>



				
			
				
					.grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Grille principale avec 3 colonnes */
    gap: 20px;
    padding: 20px;
    background-color: #eaeaea;
}

.item {
    background-color: #6b5b95; /* Couleur pour distinguer les éléments principaux */
    color: #fff;
    padding: 20px;
    text-align: center;
}

.main {
    background-color: #ffcccb;
    padding: 10px;
}

.nested-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Colonnes dynamiques */
    gap: 10px;
    background-color: #f4f4f4;
    padding: 10px;
}

.nested-item {
    background-color: #88b04b;
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
}
Grilles imbriquées (Nested Grids)

Explication :

  1. Grille principale :
      • La classe grid-container crée une grille avec trois colonnes : une large (2fr) et deux étroites (1fr chacune).
      • La cellule contenant main est utilisée pour la sous-grille.
  2. Sous-grille :
      • La classe nested-grid définit une sous-grille dynamique où chaque colonne à une largeur minimale de 100px.
      • La disposition des colonnes s’adapte automatiquement à l’espace disponible.
  3. Éléments de la sous-grille :
      • La classe nested-item attribue un style individuel à chaque élément, avec des couleurs distinctes, un texte centré, et des coins arrondis.

Grilles dynamiques avec auto-fit et auto-fill

Les valeurs auto-fit et auto-fill permettent de créer des grilles qui s’ajustent automatiquement au contenu et à l’espace disponible.

  • auto-fill : Remplit autant de colonnes que possible, même si elles sont vides.
  • auto-fit : Remplit autant de colonnes que possible et ajuste leur taille si l’espace le permet.
				
					<div class="dynamic-grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>


				
			
				
					.dynamic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 20px;
    background-color: #eaeaea;
}

.item {
    background-color: #f7cac9;
    color: #fff;
    text-align: center;
    padding: 20px;
    border-radius: 5px;
}

Résultat :

  • Les colonnes s’ajustent dynamiquement à la largeur de la fenêtre.
  • minmax(150px, 1fr) garantit une largeur minimale de 150px pour chaque colonne.
CSS Grid Grilles dynamiques avec auto-fit et auto-fill

Exemple pratique complet : Grilles imbriquées dynamiques

				
					<div class="complex-layout">
    <div class="header">Header</div>
    <div class="sidebar">
        <div class="nested-grid">
            <div class="nested-item">Sidebar 1</div>
            <div class="nested-item">Sidebar 2</div>
        </div>
    </div>
    <div class="content">
        <div class="nested-grid">
            <div class="nested-item">Content 1</div>
            <div class="nested-item">Content 2</div>
            <div class="nested-item">Content 3</div>
        </div>
    </div>
    <div class="footer">Footer</div>
</div>


				
			
				
					.complex-layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    gap: 20px;
    padding: 20px;
    background-color: #f4f4f4;
}

.header, .sidebar, .content, .footer {
    background-color: #6b5b95;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.nested-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
}

.nested-item {
    background-color: #ffcccb;
    color: #000;
    padding: 10px;
    text-align: center;
}

Résultat :

  • Une grille principale divisée en header, sidebar, content et footer.
  • La sidebar et le content contiennent des sous-grilles dynamiques.
CSS grid Grilles imbriquées et dynamiques

Ressources complémentaires pour aller plus loin

Documentation officielle :

Pour resumer

Les avantages de CSS Grid

  1. Disposition bidimensionnelle :
      • Gère les alignements aussi bien horizontalement que verticalement, contrairement à Flexbox qui est unidimensionnel.
  2. Simplicité et flexibilité :
      • Permet de concevoir des mises en page complexes avec peu de code.
  3. Responsivité intégrée :
      • Grâce à des unités comme fr, minmax() et des propriétés comme auto-fit ou auto-fill.
  4. Contrôle précis :
      • Avec grid-template-areas et des propriétés comme grid-column et grid-row, chaque élément peut être positionné avec précision.
  5. Support natif :
      • CSS Grid est pris en charge par tous les navigateurs modernes.

Conseils pour maîtriser CSS Grid

  1. Pratiquez avec des exemples concrets :
    • Reproduisez des mises en page réelles comme des galeries, des blogs ou des pages produit.
  2. Utilisez les outils des navigateurs :
    • Explorez les outils de développement (comme Chrome DevTools ou Firefox Developer Tools) pour visualiser vos grilles.
  3. Combinez CSS Grid et Flexbox :
    • Utilisez CSS Grid pour la structure globale et Flexbox pour les alignements internes.

Récapitulatif de toutes les classes CSS vue précédemment

Classe CSS Description Propriétés principales
.grid-container Définit un conteneur de grille principal. display: grid;
grid-template-columns;
grid-template-rows;
gap;
padding;
.grid-template-areas Organise des zones nommées dans la grille. grid-template-areas:
"header header"
"sidebar content"
"footer footer";
.header Section de l’en-tête définie dans grid-template-areas. grid-area: header;
background-color;
padding;
text-align;
.sidebar Section de la barre latérale définie dans grid-template-areas. grid-area: sidebar;
background-color;
padding;
text-align;
.content Section du contenu principal définie dans grid-template-areas. grid-area: content;
background-color;
padding;
.footer Section du pied de page définie dans grid-template-areas. grid-area: footer;
background-color;
padding;
text-align;
.nested-grid Sous-grille imbriquée dans un élément de la grille principale. display: grid;
grid-template-columns;
gap;
padding;
background-color;
.nested-item Élément enfant d’une sous-grille. background-color;
padding;
text-align;
border-radius;
.dynamic-grid Grille dynamique qui ajuste automatiquement ses colonnes. grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap;
padding;
.toolbar Barre d’outils organisée avec Flexbox dans une grille. display: flex;
justify-content: space-between;
gap;
margin-bottom;

Points clés du tableau :

  • Les classes grid-container et item définissent la structure de base des grilles.
  • Les classes nested-grid et nested-item permettent de gérer les grilles imbriquées.
  • Les classes header, sidebar, content, et footer illustrent l’utilisation des zones définies par grid-template-areas.
  • Les classes comme dynamic-grid exploitent des propriétés avancées pour des mises en page responsives.
  • Les classes toolbar et actions montrent comment intégrer Flexbox à CSS Grid pour des alignements spécifiques.

Conclusion

CSS Grid représente une véritable révolution dans le monde de la mise en page web. Plus qu’un simple outil, il est devenu un pilier pour concevoir des sites modernes, flexibles et esthétiques. Sa capacité à organiser les éléments dans un espace bidimensionnel libère les développeurs des contraintes des techniques plus anciennes, souvent laborieuses ou limitées.

Avec CSS Grid, la créativité n’a plus de limites. Il devient possible de traduire des maquettes complexes en code clair et performant, tout en maintenant une structure logique et accessible. Les concepts tels que les grilles dynamiques, les zones nommées ou les grilles imbriquées illustrent à quel point CSS Grid est un système pensé pour s’adapter à des besoins variés, du plus simple au plus sophistiqué.

Mais au-delà de ses capacités techniques, CSS Grid incarne aussi une philosophie : celle d’offrir des expériences utilisateur harmonieuses et responsives sur tous les écrans. En combinant sa puissance avec des outils comme Flexbox ou en suivant des pratiques modernes, les développeurs peuvent s’assurer que leurs créations ne sont pas seulement belles, mais aussi fonctionnelles et inclusives.

Alors que les sites web continuent de s’enrichir et de s’adapter aux besoins d’un monde numérique en constante évolution, maîtriser CSS Grid n’est plus une option, mais une nécessité. Investir du temps pour explorer ses fonctionnalités, expérimenter des mises en page innovantes et apprendre à l’intégrer harmonieusement avec d’autres outils est une démarche qui portera ses fruits à long terme.

En adoptant CSS Grid, vous ne faites pas seulement un pas en avant dans votre parcours de développeur web : vous embrassez l’avenir de la conception web.

Tags :

Related Articles
Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
BOOGLIT
Logo
Compare items
  • Total (0)
Compare
0