Pourquoi CSS Grid est révolutionnaire
CSS Grid Layout est le premier système de mise en page véritablement bidimensionnel du CSS. Contrairement à Flexbox qui gère une seule dimension à la fois, Grid vous permet de contrôler simultanément les lignes et les colonnes, rendant possible des layouts complexes avec un code remarquablement simple.
Depuis son adoption par tous les navigateurs modernes, CSS Grid est devenu l'outil de référence pour les mises en page de sites web. Chez Tourak Digital, nous l'utilisons dans la majorité de nos projets pour sa puissance et sa flexibilité.
Les bases de CSS Grid
Créer une grille
.grid-container {
display: grid;
/* ou display: inline-grid; */
}
/* Définir des colonnes et des lignes */
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 3 colonnes */
grid-template-rows: auto 1fr auto; /* 3 lignes */
gap: 1rem; /* Espacement */
}Unités et fonctions de dimensionnement
| Valeur | Description | Exemple |
|---|---|---|
fr | Fraction de l'espace disponible | 1fr 2fr = 1/3 et 2/3 |
px | Taille fixe en pixels | 200px |
% | Pourcentage du conteneur | 50% |
auto | S'adapte au contenu | auto |
min-content | Taille minimale du contenu | Le mot le plus long |
max-content | Taille maximale du contenu | Tout sur une ligne |
minmax() | Taille entre min et max | minmax(200px, 1fr) |
repeat() | Répétition de colonnes | repeat(3, 1fr) |
auto-fill | Remplit l'espace disponible | repeat(auto-fill, minmax(250px, 1fr)) |
auto-fit | Comme auto-fill mais collapse | repeat(auto-fit, minmax(250px, 1fr)) |
Définir la grille : grid-template
grid-template-columns et grid-template-rows
/* Colonnes de taille fixe */
.grid { grid-template-columns: 100px 200px 100px; }
/* Colonnes avec fractions */
.grid { grid-template-columns: 1fr 2fr 1fr; }
/* Colonnes avec repeat */
.grid { grid-template-columns: repeat(4, 1fr); }
/* Colonnes responsive automatiques */
.grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
/* Mélange de tailles */
.grid {
grid-template-columns: 250px 1fr 250px;
grid-template-rows: 80px 1fr 60px;
}grid-template-areas : nommer les zones
La fonctionnalité la plus intuitive de CSS Grid vous permet de dessiner votre layout avec des noms :
.page-layout {
display: grid;
grid-template-columns: 250px 1fr 300px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar content aside"
"footer footer footer";
gap: 1rem;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
/* Responsive : empiler en mobile */
@media (max-width: 768px) {
.page-layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"sidebar"
"aside"
"footer";
}
}Placer les éléments dans la grille
Placement par lignes
/* Les lignes de grille sont numérotées à partir de 1 */
.item-a {
grid-column-start: 1;
grid-column-end: 3; /* S'étend sur 2 colonnes */
grid-row-start: 1;
grid-row-end: 2;
}
/* Raccourcis */
.item-a {
grid-column: 1 / 3; /* De la ligne 1 à la ligne 3 */
grid-row: 1 / 2;
}
/* Avec span */
.item-a {
grid-column: 1 / span 2; /* Commence à 1, s'étend sur 2 */
grid-row: 1;
}
/* Ligne négative (depuis la fin) */
.full-width {
grid-column: 1 / -1; /* Toute la largeur */
}Placement automatique avec auto-flow
/* Remplissage ligne par ligne (défaut) */
.grid { grid-auto-flow: row; }
/* Remplissage colonne par colonne */
.grid { grid-auto-flow: column; }
/* Algorithme dense (remplit les trous) */
.grid { grid-auto-flow: row dense; }Alignement dans CSS Grid
.grid {
display: grid;
grid-template-columns: repeat(3, 200px);
/* Alignement de la grille entière dans le conteneur */
justify-content: center; /* Horizontal */
align-content: center; /* Vertical */
/* Alignement des items dans leurs cellules */
justify-items: center; /* Horizontal */
align-items: center; /* Vertical */
/* Raccourci place-items */
place-items: center; /* align-items + justify-items */
place-content: center; /* align-content + justify-content */
}
/* Alignement individuel */
.special-item {
justify-self: end;
align-self: start;
/* ou : place-self: start end; */
}Patterns Grid courants et pratiques
Grille de cartes auto-responsive
/* La grille la plus utile : s'adapte sans media queries */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
padding: 2rem;
}Layout magazine (éléments de tailles différentes)
.magazine-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 1rem;
}
.featured {
grid-column: span 2;
grid-row: span 2;
}
.tall { grid-row: span 2; }
.wide { grid-column: span 2; }Layout Holy Grail (header, footer, sidebar, contenu)
.holy-grail {
display: grid;
grid-template: auto 1fr auto / 200px 1fr 200px;
gap: 1rem;
min-height: 100vh;
}
.hg-header { grid-column: 1 / -1; }
.hg-footer { grid-column: 1 / -1; }
.hg-left { grid-column: 1; }
.hg-main { grid-column: 2; }
.hg-right { grid-column: 3; }
@media (max-width: 768px) {
.holy-grail {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.hg-header, .hg-footer, .hg-left,
.hg-main, .hg-right {
grid-column: 1;
}
}Galerie d'images avec tailles variées
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-auto-rows: 150px;
grid-auto-flow: dense;
gap: 0.5rem;
}
.gallery img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}
.gallery .landscape { grid-column: span 2; }
.gallery .portrait { grid-row: span 2; }
.gallery .big { grid-column: span 2; grid-row: span 2; }Subgrid : la fonctionnalité avancée
Le subgrid permet aux éléments enfants d'hériter de la grille de leur parent :
.parent-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.child-grid {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid; /* Hérite des colonnes du parent */
gap: 1rem;
}Conseils de performance et bonnes pratiques
- Préférez auto-fit à auto-fill si vous voulez que les colonnes s'étirent pour remplir l'espace.
- Utilisez minmax() pour des colonnes flexibles mais contrôlées.
- Nommez vos zones avec grid-template-areas pour un code plus lisible et maintenable.
- Combinez Grid et Flexbox : Grid pour le layout de page, Flexbox pour les composants internes.
- Évitez les grilles trop complexes : si votre grille a plus de 12 colonnes, simplifiez.
- Testez le responsive sans media queries d'abord avec auto-fit + minmax.
Conclusion
CSS Grid est l'outil le plus puissant jamais créé pour les mises en page web. Avec ses grilles bidimensionnelles, le placement par zones nommées, et la fonction auto-fit/minmax, vous pouvez créer des layouts complexes et responsives avec un minimum de code. Combinez-le avec Flexbox pour une maîtrise complète du CSS moderne.
Chez Tourak Digital, nous exploitons CSS Grid dans tous nos projets pour des interfaces élégantes et performantes. Contactez-nous pour un site au layout impeccable.