Générateur CSS Grid
Construire des mises en page CSS grid visuellement.
Préréglages de mise en page (10)
Faites glisser sur les cellules pour peindre un rectangle, ou cliquez sur une cellule à la fois. Chaque zone nommée doit rester rectangulaire.
Aperçu en direct
Unidimensionnel : Générateur CSS Flexbox.
Créer une grille CSS avec zones nommées
Dessinez une grille de lettres pour les zones de modèle, ou choisissez un préréglage. L'aperçu montre chaque région d'une teinte distincte.
FAQ
Qu’est-ce que grid-template-areas ?
Une méthode pour nommer les zones d’une mise en page (header, sidebar, main…) et placer les éléments par nom plutôt que par numéro de ligne. Cliquez sur les cellules ci-dessous pour peindre les lettres des zones — le CSS se met à jour en direct.
Puis-je partir d’un préréglage ?
Oui — dix préréglages de mise en page, dont Holy grail, dashboard, magazine et app shell, chargent des zones nommées en un clic.
Quelque chose est-il téléchargé ?
Non. Le CSS est entièrement généré dans votre navigateur.
Dernière mise à jour: