01
Choisir le modèle
Grid organise des zones sur lignes et colonnes ; Flexbox aligne une série d’éléments. Le passage de l’un à l’autre conserve vos choix.
- L’exemple Grid comporte déjà quatre zones rectangulaires.
Outils de mise en page CSS
générateur de mise en page CSS— Voir le rendu avant le code
Passez de Grid à Flexbox et vérifiez côte à côte le canevas, l’aperçu et le code.
générateur de mise en page CSS
Choisissez une cellule puis le coin opposé.
.layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 16px;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.area-header { grid-area: header; }
.area-sidebar { grid-area: sidebar; }
.area-main { grid-area: main; }
.area-footer { grid-area: footer; }
@media (max-width: 640px) {
.layout {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-template-areas: "header" "sidebar" "main" "footer";
}
}Les réglages restent dans cet onglet du navigateur, sans envoi ni historique.
Code et aperçu à jour.
Pour une page avec en-tête, barre latérale et contenu, compter les cellules de grid-template-areas à la main est pénible. Le générateur de mise en page CSS montre d’abord les zones nommées sur une grille.
Une navigation tient souvent sur un seul axe. Ce générateur de mise en page CSS garde les réglages de Flexbox et de Grid séparément : revenir au squelette de page ne demande pas de tout recommencer.
Pourquoi ce générateur de mise en page CSS
Le dessin et le code exporté découlent des mêmes paramètres.
Grid et Flexbox sur une seule page
Le générateur CSS Grid sert aux régions sur deux axes ; le générateur Flexbox aligne des éléments sur un axe. Chaque mode conserve sa direction, son espacement et ses pistes quand vous basculez.
Un aperçu mobile relié au vrai CSS
La mise en page responsive ajoute une règle @media à 640px. L’aperçu étroit affiche le HTML/CSS produit par le navigateur, et pas une image simplement réduite.
Faire correspondre aperçu et export
02
Ajuster les pistes et les zones
Chaque piste accepte fr, px, auto ou minmax(). Choisissez un nom de zone puis deux coins opposés pour dessiner un rectangle.
- Désactiver le calcul automatique rend le raccourci Ctrl/Cmd+Entrée disponible.
03
Contrôler la version étroite
Passez à 390px et vérifiez l’ordre des zones. Après un changement, copie et téléchargement sont désactivés tant que le résultat n’est pas actualisé.
- La requête média n’apparaît que si l’empilement mobile est choisi.
Des zones visibles au balisage utile
Zones de grille nommées
Les zones de grille peintes produisent grid-template-areas et les règles grid-area des enfants HTML avec les mêmes noms.
Réglages du conteneur Flex
Direction, retour à la ligne, alignement sur deux axes, nombre d’éléments et espacement alimentent un vrai rendu du navigateur.
HTML et CSS responsive
Un préréglage génère une requête à 640px. Le HTML correspondant se copie ou se télécharge dans un fichier autonome.
Ce que le code accepte et exclut
- Une zone doit être rectangulaire
- Des zones séparées, superposées ou en L rendent grid-template-areas invalide. Le canevas refuse ces gestes et empêche de copier l’ancien résultat comme s’il était à jour.
- Les tailles des pistes sont vérifiées
- 1fr, 200px, auto et minmax(120px, 1fr) sont acceptés. Une valeur non prise en charge bloque la génération au lieu de devenir du CSS trompeur.
- Un seul seuil mobile
- À 640px ou moins, les zones s’empilent. Tablette et bureau ne changent que la largeur d’aperçu ; pas de seuils personnalisés, ni de Tailwind, SCSS ou React.
- Le HTML reste un squelette
- Les enfants Grid portent des noms de zones et les enfants Flex sont numérotés. L’outil ne lit pas une page existante et ne construit pas son contenu complet.
Questions sur le générateur de mise en page CSS
Quand utiliser Flexbox plutôt que CSS Grid ?
Flexbox convient aux éléments sur une ligne ou une colonne ; Grid sert aux structures en lignes et colonnes. Le générateur de mise en page CSS permet d’essayer les deux.
Comment rendre une grille CSS responsive ?
Choisissez l’empilement mobile puis regardez l’aperçu à 390px. La règle exportée s’applique à 640px ; adaptez ensuite le seuil à votre contenu réel si besoin.
À quoi sert l'unité fr dans une grille ?
fr répartit l’espace libre entre les pistes ; une valeur px fixe leur taille. Les champs de piste sont validés avant la copie.
Comment définir des zones nommées avec grid-template-areas ?
Répétez un nom sur les cellules adjacentes d’un rectangle, puis associez ce nom à l’enfant avec grid-area. Le canevas produit ces deux parties ensemble.
Pourquoi un contenu long déborde-t-il d'une grille ?
Un élément peut conserver sa largeur minimale liée à son contenu. L’exemple généré fixe min-width:0 et autorise la coupure, mais vérifiez vos contenus longs dans le projet.
Un cas de disposition manque ?
Essayer le générateur de mise en page CSS
Partez de l’exemple, contrôlez le rendu réel et intégrez dans votre projet le HTML et le CSS produits ensemble.