Bac à sable CSS Grid
Explorer les colonnes, les lignes et les zones d’une grille.
Données d’entrée
Cet outil fonctionne entièrement dans votre navigateur. Les données saisies ou chargées ne sont jamais envoyées.
Résultat
Saisissez vos données, puis lancez l’outil.
À propos de cet outil
Configure le nombre de colonnes, les tailles, les espacements et le placement des éléments d’une grille CSS, avec le code correspondant affiché en direct.
Comment l’utiliser
- Choisissez le modèle de colonnes et les espacements.
- Déplacez les éléments puis copiez le CSS.
Questions fréquentes
Que signifie 1fr ?
Une fraction de l’espace disponible après déduction des tailles fixes et des espacements.
Comment rendre une grille responsive ?
Utilisez repeat(auto-fit, minmax(240px, 1fr)) pour un nombre de colonnes automatique.
Pour aller plus loin
Outils liés
Bac à sable Flexbox
Tester les propriétés flex sans écrire de CSS.
Générateur de border-radius
Arrondir les coins d’un élément, y compris en ellipse.
Générateur d’ombre CSS
Composer un box-shadow avec aperçu en direct.
HEX vers RGB
Convertir une couleur HEX en valeurs RGB.
RGB vers HEX
Convertir des valeurs RGB en code HEX.
RGB vers HSL
Passer d’une couleur RGB à sa teinte, saturation et luminosité.