Developer Tools
Design Tools
Web UtilitiesCSS Grid Playground
Créez des mises en page CSS Grid visuellement avec une prévisualisation en temps réel, la prise en charge des zones de modèle et une sortie de code CSS instantanée. Configurez les colonnes, les lignes, les espaces et le positionnement des éléments de manière interactive.
Presets
Propriétés du Conteneur
Propriétés de l'Élément
Aperçu en Direct
CSS du Conteneur
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 80px);
gap: 8px;
}CSS des Éléments
.grid-item-1 {
}
.grid-item-2 {
}
.grid-item-3 {
}
.grid-item-4 {
}
.grid-item-5 {
}Outils Associés
À propos du CSS Grid Playground
Comment ça marche
- Configurez les propriétés du conteneur : grid-template-columns, grid-template-rows, gap, justify-items, align-items, justify-content et align-content
- Ajoutez jusqu'à 8 éléments de grille et positionnez chacun avec grid-column-start/end et grid-row-start/end
- Utilisez la notation span (ex : span 2) ou des numéros de lignes explicites dans les champs de modèle
- Prévisualisez la mise en page en temps réel — cliquez sur n'importe quel élément dans l'aperçu pour le sélectionner dans l'éditeur
- Appliquez des presets pour les mises en page courantes comme Holy Grail, Dashboard ou Card Grid, puis personnalisez
- Copiez le CSS généré pour le conteneur et les éléments directement dans votre projet
Cas d'Utilisation Courants
- Apprendre les propriétés CSS Grid de manière interactive avec un retour visuel instantané
- Prototyper des mises en page : en-têtes, barres latérales, tableaux de bord, grilles de cartes
- Déboguer les problèmes de placement de grille en ajustant visuellement les numéros de lignes
- Générer du CSS de grille de base pour les mises en page courantes
- Enseigner CSS Grid aux étudiants et collègues
Questions Fréquentes
Qu'est-ce que le CSS Grid Playground ?
Le CSS Grid Playground est un outil interactif pour navigateur qui vous permet de configurer visuellement toutes les propriétés des conteneurs et éléments CSS Grid. Les modifications apparaissent instantanément dans la prévisualisation en direct, et le code CSS prêt à l'emploi est généré automatiquement pour que vous puissiez le copier dans votre projet.
Quelles propriétés du conteneur puis-je configurer ?
Vous pouvez configurer grid-template-columns, grid-template-rows, gap (ou column-gap et row-gap séparément), justify-items, align-items, justify-content et align-content. Toutes les valeurs prennent en charge n'importe quelle syntaxe CSS valide, y compris les unités fr, repeat(), minmax() et auto.
Comment positionner un élément sur des lignes spécifiques ?
Sélectionnez l'élément en utilisant son onglet numéroté dans le panneau Propriétés de l'Élément, puis définissez grid-column-start, grid-column-end, grid-row-start et grid-row-end. Entrez un nombre pour une ligne de grille explicite ou laissez 'auto' pour le positionnement automatique.
Que sont les presets et comment les utiliser ?
Les presets sont des configurations de grille prédéfinies pour les mises en page courantes : 'Holy Grail' crée une mise en page classique en-tête/nav/principal/latéral/pied de page, 'Sidebar + Main' construit une mise en page à deux colonnes avec barre latérale, '3-Col Masonry' illustre les éléments à extension, 'Dashboard' affiche un tableau de bord à quatre colonnes, 'Blog Layout' configure un article typique avec barre latérale, et 'Card Grid' crée une grille de cartes à trois colonnes égales.
Quelles valeurs grid-template-columns accepte-t-il ?
grid-template-columns accepte n'importe quelle liste de pistes CSS valide : longueurs fixes comme '200px 1fr', la fonction repeat() comme 'repeat(3, 1fr)', minmax() comme 'repeat(3, minmax(100px, 1fr))', auto-fill ou auto-fit, ou des lignes nommées comme '[début] 1fr [fin]'.
Quelle est la différence entre les unités fr et les pixels ?
L'unité fr (fractionnaire) représente une fraction de l'espace disponible dans le conteneur de grille. '1fr 1fr 1fr' divise l'espace équitablement en trois colonnes. '2fr 1fr' donne à la première colonne deux fois plus d'espace. Les valeurs en pixels sont fixes quelle que soit la taille du conteneur.
Que fait justify-items par rapport à justify-content ?
justify-items contrôle la façon dont les éléments sont alignés dans leurs cellules de grille le long de l'axe en ligne. justify-content contrôle la façon dont toute la grille est alignée dans le conteneur quand il y a de l'espace supplémentaire. De même, align-items aligne les éléments dans leurs cellules sur l'axe de bloc.
Que sont justify-self et align-self pour les éléments de grille ?
justify-self remplace justify-items pour un seul élément de grille, contrôlant son alignement en ligne dans sa cellule. align-self remplace align-items pour un seul élément, contrôlant son alignement de bloc. Tous deux acceptent : auto, start, end, center et stretch.
Comment faire s'étendre un élément sur plusieurs colonnes ou lignes ?
Définissez grid-column-start et grid-column-end (ou grid-row-start et grid-row-end) pour créer une extension. Par exemple, pour s'étendre de la colonne 1 à la colonne 3, définissez start=1 et end=3. Vous pouvez aussi laisser start comme 'auto' et définir end sur 'span 2' pour s'étendre sur deux pistes.
Combien d'éléments de grille puis-je ajouter ?
Vous pouvez ajouter jusqu'à 8 éléments de grille. Cliquez sur le bouton '+ Ajouter Élément' pour en ajouter davantage. Chaque élément est codé par couleur pour que vous puissiez l'identifier dans le panneau de paramètres et la prévisualisation en direct.
Puis-je utiliser des tailles de gap personnalisées pour les colonnes et les lignes ?
Oui. Par défaut, une valeur de gap unique s'applique aux deux canaux de colonnes et de lignes. Cochez l'option 'Utiliser des gaps personnalisés colonne/ligne' pour définir column-gap et row-gap indépendamment avec des curseurs séparés.
Comment copier le CSS généré ?
Deux boutons de copie sont disponibles : un pour le bloc CSS du conteneur (.grid-container) et un pour tout le CSS incluant les règles des éléments. Cliquez sur n'importe quel bouton 'Copier CSS' pour copier le code dans votre presse-papiers.