Combiner Flexbox et Grid
Utilisez Grid pour la mise en page générale et Flexbox pour l’alignement au niveau des composants, en sachant quel outil choisir selon la situation.
Combiner Flexbox et Grid est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Des outils complémentaires
La grille CSS et la mise en page flexible ne sont pas rivales : elles sont conçues pour fonctionner ensemble. Le modèle habituel consiste à utiliser la grille CSS pour la structure générale de la page, puis une mise en page flexible à l’intérieur de chaque zone de grille pour organiser le contenu du composant.
Mise en page avec une grille, composants avec une disposition flexible
Définissez la structure générale de la page avec une grille. Dans chaque zone de grille, utilisez une disposition flexible pour organiser les composants : liens de navigation sur une ligne et contenu des cartes dans une colonne.
/* Page skeleton */
body {
display: grid;
grid-template-areas: 'header' 'main' 'footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Component inside grid area */
header {
display: flex;
justify-content: space-between;
align-items: center;
}Modèle de grille de cartes
Le modèle classique consiste à utiliser une grille pour disposer les cartes et une disposition flexible pour l’intérieur de chaque carte. Les cartes s’alignent ainsi sur la grille tandis que leur contenu interne (image, titre, corps et pied de page) s’empile correctement.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
}
.card-body { flex: 1; } /* push footer down */Modèle de barre de navigation
Une barre de navigation courante combine les deux approches. La navigation elle-même est un conteneur flexible pour le logo et les liens. La section des liens peut être un autre conteneur flexible. Un menu étendu peut utiliser une grille pour une disposition en plusieurs colonnes.
Mise en page du Saint Graal
La mise en page du « Saint Graal » (en-tête, zone centrale à trois colonnes et pied de page) se réalise très simplement avec une grille aujourd’hui. Les trois colonnes — barre latérale gauche, contenu principal et barre latérale droite — sont des colonnes de grille ; le contenu de chacune utilise une disposition flexible.
.page {
display: grid;
grid-template:
'header header header' auto
'left main right' 1fr
'footer footer footer' auto
/ 200px 1fr 200px;
min-height: 100vh;
}Centrer n’importe quel contenu — grille ou disposition flexible
La grille et la mise en page flexible peuvent toutes deux centrer parfaitement le contenu. Avec une grille : place-items: center (raccourci pour l’alignement des éléments et la justification des éléments). Avec une disposition flexible : justify-content: center; align-items: center.
.center-grid {
display: grid;
place-items: center; /* centers both axes */
min-height: 100vh;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Mise en page adaptative avec barre latérale
Sur mobile : une seule colonne, avec la navigation en haut. À partir de la tablette : barre latérale et contenu côte à côte. La grille rend cette disposition déclarative : modifiez les zones du modèle dans une requête de média.
Modèle icône et texte
Il s’agit d’une micro-mise en page très courante : une icône à côté d’un texte. La mise en page flexible convient parfaitement, car il s’agit d’une seule ligne avec un alignement.
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
}
.alert-icon { flex-shrink: 0; width: 20px; }
.alert-body { flex: 1; }Quand choisir l’une ou l’autre
Choisissez la grille lorsque vous raisonnez en lignes et en colonnes, lorsque les éléments doivent s’aligner sur plusieurs pistes ou lorsque vous construisez la structure d’une page. Choisissez une disposition flexible lorsque vous raisonnez dans une seule direction, lorsque les éléments doivent rétrécir et s’agrandir ou lorsque vous disposez une rangée de boutons ou une pile d’éléments.
Ne complexifiez pas inutilement
Parfois, un simple élément de type bloc avec une largeur maximale et des marges automatiques convient mieux qu’une grille complexe. Toutes les mises en page n’ont pas besoin d’une grille. Utilisez l’outil le plus simple qui permet d’accomplir la tâche.
Déboguer les problèmes de mise en page
Dans DevTools, cliquez sur les badges de grille ou de disposition flexible dans le panneau des éléments pour superposer les lignes de la grille ou les contours des éléments flexibles. Cette fonction rend visible la structure de mise en page invisible et est très utile pour diagnostiquer les problèmes d’alignement.
Vérification rapide
Quelle combinaison d’outils de mise en page est la plus courante pour les mises en page de niveau page et de niveau composant, respectivement ?
Récapitulatif : combiner grille et disposition flexible
La grille et la mise en page flexible sont complémentaires. Utilisez la grille pour la structure bidimensionnelle de la page. Utilisez une disposition flexible pour le contenu interne unidimensionnel des composants. Le centrage des éléments sur une grille permet de tout centrer. Une orientation en colonne combinée à une croissance flexible dans le corps d’une carte repousse les pieds de page des cartes vers le bas. Déboguez avec les badges de superposition de DevTools.
Questions Fréquemment Posées
La leçon « Combiner Flexbox et Grid » est-elle gratuite ?
Oui — le texte complet de « Combiner Flexbox et Grid » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Combiner Flexbox et Grid » ?
Utilisez Grid pour la mise en page générale et Flexbox pour l’alignement au niveau des composants, en sachant quel outil choisir selon la situation. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Combiner Flexbox et Grid » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Approfondissement de Flexbox : alignement, retour à la ligne et ordre
- CSS Grid : zones de modèle, auto-fit et minmax
- Combiner Flexbox et Grid
- Variables CSS pour les thèmes