Skip to main content
FreeToolkit .ai

Zone de jeu CSS Grid Construteur visuel CSS Grid avec contrôles interactifs pour les colonnes de modèle, les lignes et les espaces.

Zone de jeu CSS Grid illustration
🎨

Zone de jeu CSS Grid

Construteur visuel CSS Grid avec contrôles interactifs pour les colonnes de modèle, les lignes et les espaces.

1

Définir la structure de grille

Déterminez le nombre de colonnes et de lignes, ou entrez des valeurs de modèle personnalisées.

2

Ajuster les espaces et l'alignement

Contrôlez les intervalles entre les colonnes et les lignes, ainsi que les options justify-items et align-items.

3

Copier le CSS

Prévisualisez la disposition de grille et copiez le code CSS.

Loading tool...

What Is Zone de jeu CSS Grid?

Le CSS Grid Playground est un outil de construction interactif pour les dispositions de mise en page CSS Grid, le système de disposition le plus puissant dans CSS. La grille offre un contrôle bidimensionnel sur les lignes et les colonnes simultanément, ce qui la rend idéale pour les mises en page de pages complexes. Cet outil propose deux modes : le mode automatique utilise repeat(n, 1fr) pour des grilles à colonnes égales simples, tandis que le mode manuel vous permet d'entrer des valeurs de modèle personnalisées comme 1fr 2fr 1fr ou 200px auto 200px. Vous pouvez contrôler les espaces entre les colonnes et les lignes de manière indépendante, ainsi que définir justify-items et align-items pour l'alignement du contenu à l'intérieur des cellules de la grille. L'aperçu visuel montre des éléments de grille colorés afin que vous puissiez voir exactement comment fonctionne votre configuration de mise en page. Cet outil est excellent tant pour apprendre Grid que pour créer des mises en page de production.

Why Use Zone de jeu CSS Grid?

  • Modes de modèle automatique et personnalisé pour une flexibilité accrue
  • Contrôles d'intervalles entre colonnes et lignes indépendants
  • Justify-items et align-items pour l'alignement du contenu des cellules
  • Prévisualisation visuelle interactive avec des éléments de grille colorés

Common Use Cases

Dispositions de page

Concevez des dispositions de page complètes avec en-tête, barre latérale, contenu et pied de page.

Galeries d'images

Créez des galeries d'images réactives avec un espacement cohérent.

Dispositions de tableau de bord

Concevez des dispositions de widget de tableau de bord avec différentes zones de grille de tailles variables.

Apprendre CSS Grid

Expérimentez les propriétés de grille pour comprendre les dispositions bidimensionnelles.

Technical Guide

La grille CSS est activée avec display: grid sur un conteneur. grid-template-columns définit les pistes de colonnes à l'aide de valeurs de longueur, d'unités fr (fractionnelles) ou de fonctions comme repeat() et minmax(). L'unité fr répartit l'espace disponible de manière proportionnelle. grid-template-rows fonctionne de la même manière pour les pistes de lignes. gap (ou row-gap et column-gap) définit l'espacement entre les pistes. justify-items et align-items contrôlent la façon dont le contenu est aligné à l'intérieur des cellules de la grille. Les éléments de la grille peuvent s'étendre sur plusieurs cellules en utilisant grid-column: span n et grid-row: span n. Les zones de grille nommées à l'aide de grid-template-areas fournissent une façon visuelle de définir des mises en page complexes. Les mots-clés auto-fit et auto-fill dans repeat() créent des mises en page réactives sans requêtes multimédias : repeat(auto-fit, minmax(250px, 1fr)) crée autant de colonnes que possible avec une largeur minimale.

Tips & Best Practices

  • 1
    Utilisez des unités fr pour un dimensionnement proportionnel et flexible des colonnes
  • 2
    Combinez minmax() avec auto-fit pour des dispositions réactives sans requêtes média
  • 3
    Utilisez grid-template-areas pour des régions de disposition nommées lisibles
  • 4
    Définissez l'intervalles au lieu des marges pour un espacement intercellulaire cohérent

Related Tools

Zone de jeu CSS Flexbox - free online tool

Zone de jeu CSS Flexbox

Explorateur visuel CSS Flexbox avec contrôles interactifs pour toutes les propriétés des conteneurs flexibles.

🎨 CSS & Design
Générateur de tableaux CSS - free online tool

Générateur de tableaux CSS

Créez des tableaux HTML élégamment stylisés avec des couleurs personnalisables, des rayures et des effets au survol.

🎨 CSS & Design
Générateur de colonnes CSS - free online tool

Générateur de colonnes CSS

Créez des mises en page de texte à plusieurs colonnes avec un nombre de colonnes, un espace et un style de règle personnalisables.

🎨 CSS & Design
Testeur de conception responsive - free online tool

Testeur de conception responsive

Prévisualisez les sites Web aux points de rupture d'appareil courants avec un affichage iframe intégré.

🎨 CSS & Design

Frequently Asked Questions

Q Que signifie fr dans CSS Grid ?
fr est une unité fractionnaire qui distribue l'espace disponible de manière proportionnelle. 1fr 2fr crée deux colonnes où la seconde est deux fois plus large.
Q Comment créer une grille réactive ?
Utilisez repeat(auto-fit, minmax(250px, 1fr)) pour une grille qui s'ajuste automatiquement en fonction de la largeur du conteneur.
Q Les éléments de grille peuvent-ils se chevaucher ?
Oui, les éléments de grille peuvent occuper les mêmes cellules à l'aide d'un placement explicite, créant ainsi des conceptions en couches.
Q Quand utiliser Grid au lieu de Flexbox ?
Grid pour les dispositions bidimensionnelles (lignes et colonnes). Flexbox pour les dispositions unidimensionnelles (une seule ligne ou colonne).
Q CSS Grid fonctionne-t-il dans tous les navigateurs ?
CSS Grid est pris en charge par la plupart des navigateurs modernes. IE11 prend en charge une ancienne spécification de grille avec certaines différences.

About This Tool

Zone de jeu CSS Grid is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.