Générateur CSS Grid
Créez une disposition bidimensionnelle avec pistes explicites et implicites et éléments individuels. Le navigateur calcule la mise en page ; l’éditeur présente les règles déclarées.
Créer une grille
- Réglez les dimensions, les pistes, le flux, la direction, les écarts et les alignements.
- Modifiez le texte et le placement, changez l’ordre source ou définissez des zones nommées. Corrigez les champs incomplets ou contradictoires.
- Examinez l’aperçu et le code, copiez le CSS ou le HTML ou téléchargez le document complet utilisé par l’aperçu.
Comprendre les règles
Les pistes explicites viennent du modèle ; le placement automatique ou hors modèle peut créer des pistes implicites selon leurs propres motifs.
fr partage l’espace restant selon Grid, pas un pourcentage de la boîte extérieure. 1fr a un minimum automatique ; minmax(0px, 1fr) le modifie. Le minimum de l’élément est distinct.
Les lignes, order et dense peuvent modifier l’ordre visuel sans changer l’ordre de lecture ou de focus du HTML. Déplacer les éléments modifie l’ordre source.
Les colonnes suivent l’axe inline, les rangées l’axe block ; leurs directions physiques changent en écriture verticale. Ajuster ne crée pas de points de rupture.
Exemples
Avec une largeur border-box de 640px, deux bordures de 1px et un remplissage de 16px de chaque côté, le contenu mesure 606px. Après deux écarts de 12px et une piste de 120px, il reste 462px : sous des hypothèses simples, 1fr et 2fr reçoivent 154px et 308px. Le résultat réel peut varier.
Avec trois colonnes explicites, -1 désigne la dernière ligne explicite, même si des colonnes implicites apparaissent. La valeur négative reste dans le CSS.
Sur deux colonnes, header peut occuper la première rangée, nav et main la deuxième, footer la troisième. Chaque zone est rectangulaire ; les cases vides utilisent un point.
Limites de l’éditeur
Chaque axe accepte 1–12 pistes explicites et 1–4 dimensions implicites ; il y a 1–12 éléments. L’éditeur accepte minmax, lignes, spans et rectangles nommés, pas du CSS arbitraire.
Il ne génère ni repeat, auto-fit, auto-fill, subgrid, masonry, grille imbriquée ni point de rupture. Des pistes flexibles ne garantissent pas un site adaptatif.
Des pistes en pourcentage et des écarts peuvent déborder. Contenu, polices, minimums automatiques, bordures et barres de défilement influencent le résultat.
Le mode lignes autorise le chevauchement mais refuse deux extrémités définies égales ou inversées. Les zones nommées doivent être uniques, internes et sans chevauchement.
Aperçu et téléchargement partagent un document avec marges de page nulles. Sur un autre site, les styles et les métriques du navigateur peuvent affecter le fragment.
Exemple local
Le texte est échappé et le code créé localement, sans envoi ni enregistrement dans l’URL ou l’historique. L’aperçu utilise un sandbox vide et une politique restrictive des ressources ; cela ne certifie ni les autres services ni les modifications ultérieures.
Questions sur CSS Grid
Sources
Spécifications décrivant le comportement de l’exemple.
- W3Cw3.orgCSS Grid LayoutCSS Grid
- W3Cw3.orgCSS Box AlignmentCSS Box Alignment
- W3Cw3.orgCSS Writing ModesCSS Writing Modes
- W3Cw3.orgCSS SizingDéfinit les dimensions intrinsèques et préférées.
- W3Cw3.orgCSS GapsDéfinit les écarts entre rangées et colonnes.
- WHATWGhtml.spec.whatwg.orgHTML iframeDéfinit le comportement de iframe, srcdoc et sandbox.
- W3Cw3.orgContent Security PolicyContent Security Policy
Descriptions des sources vérifiées le 09/11/2026.
Le navigateur calcule la mise en page ; les spécifications ne certifient pas cette implémentation.
Outils associés
SVG en PNG
Convertissez un fichier SVG local ou du code collé en PNG, avec dimensions définies, transparence et polices intégrées.
Ouvrir l’outil — SVG en PNGGénérateur de filtres CSS
Ordonnez et répétez les effets CSS, comparez un exemple et copiez la déclaration exacte.
Ouvrir l’outil — Générateur de filtres CSSCalculateur de taille de police fluide
Définissez la taille de police pour deux largeurs de fenêtre. Copiez le CSS relatif à la racine et consultez le modèle calculé avec les mêmes coefficients exportés.
Ouvrir l’outil — Calculateur de taille de police fluideGénérateur de bouton CSS
Personnalisez les états d’un bouton natif, vérifiez le focus clavier et copiez le HTML et le CSS.
Ouvrir l’outil — Générateur de bouton CSSGénérateur CSS de border-radius
Modifiez huit rayons, prévisualisez un cadre et copiez le CSS en pixels ou pourcentages.
Ouvrir l’outil — Générateur CSS de border-radiusGénérateur de boîtes flexibles CSS
Créez un exemple Flexbox avec des contrôles de conteneur et d'élément, des axes de mise en page explicites, une correspondance CSS et HTML et un téléchargement local d'exemple complet.
Ouvrir l’outil — Générateur de boîtes flexibles CSSGénérateur CSS d’ombres de texte
Créez des ombres de texte ordonnées, prévisualisez du texte brut et copiez le CSS exact.
Ouvrir l’outil — Générateur CSS d’ombres de texteGénérateur de transformation CSS
Composez des transformations CSS 2D répétables, modifiez px ou la traduction et l'origine en pourcentage, inspectez une boîte de référence et copiez les déclarations actuelles exactes.
Ouvrir l’outil — Générateur de transformation CSSGénérateur d’ombres CSS
Créez des couches box-shadow ordonnées, prévisualisez et copiez le code CSS.
Ouvrir l’outil — Générateur d’ombres CSSFiligrane sur image
Ajoutez du texte ou un logo aux images, vérifiez les résultats et téléchargez les fichiers individuels ou un ZIP.
Ouvrir l’outil — Filigrane sur imageGénérateur de dégradés CSS
Créez des dégradés linéaires ou radiaux avec couleurs, opacité et points réglables.
Ouvrir l’outil — Générateur de dégradés CSSConvertisseur de couleurs
Convertissez les valeurs sRGB HEX, RGB et HSL prises en charge, avec alpha et précision explicite.
Ouvrir l’outil — Convertisseur de couleursImage en texte (OCR)
Reconnaissez le texte imprimé de PNG ou JPEG locaux, choisissez la langue et vérifiez ou corrigez le résultat avant de le copier ou télécharger.
Ouvrir l’outil — Image en texte (OCR)Lecteur de QR depuis une image
Lisez un QR code depuis un PNG ou JPEG local et examinez le texte ou les octets sans ouvrir de lien.
Ouvrir l’outil — Lecteur de QR depuis une imageVérificateur de contraste des couleurs
Comparez les couleurs du premier plan et de l’arrière-plan, ajustez l’opacité et vérifiez les seuils numériques WCAG pour le texte et les détails essentiels de l’interface.
Ouvrir l’outil — Vérificateur de contraste des couleursCalculateur de taille d’impression et de résolution
Calculez la taille d’impression, les pixels nécessaires et la résolution effective avec marges ou recadrage.
Ouvrir l’outil — Calculateur de taille d’impression et de résolutionCalculateur de rapport largeur/hauteur
Calculez le rapport largeur/hauteur ou de nouvelles dimensions en pixels en fixant un seul côté.
Ouvrir l’outil — Calculateur de rapport largeur/hauteurCompresseur d’images
Essayez d’adapter un JPEG, PNG ou WebP à une taille de fichier cible, avec résultat mesuré et réduction facultative des dimensions.
Ouvrir l’outil — Compresseur d’imagesHEIC en JPG
Convertissez localement vos photos HEIC compatibles en JPG à pleine résolution, avec qualité et fond réglables, puis téléchargez les fichiers vérifiés seuls ou en ZIP.
Ouvrir l’outil — HEIC en JPGConvertisseur d’images
Convertissez des images PNG, JPEG et WebP localement, réglez transparence, fond et qualité, puis téléchargez les résultats.
Ouvrir l’outil — Convertisseur d’imagesCréer un collage photo
Disposez des photos locales en grille et téléchargez un PNG ou JPEG.
Ouvrir l’outil — Créer un collage photoPivoter et retourner des images
Faites pivoter ou retournez un lot local d’images statiques PNG, JPEG et WebP, puis vérifiez et téléchargez les résultats.
Ouvrir l’outil — Pivoter et retourner des imagesRecadrer une image
Recadrez un fichier JPEG, PNG ou WebP local au pixel près et téléchargez le résultat en PNG ou JPEG.
Ouvrir l’outil — Recadrer une imageRedimensionner une image
Redimensionnez une image JPG, PNG ou WebP en pixels ou en pourcentage, vérifiez et téléchargez le résultat.
Ouvrir l’outil — Redimensionner une image