Qu'est-ce que CSS Grid ?
CSS Grid Layout est un système de mise en page bidimensionnel intégré aux navigateurs modernes. Vous définissez un conteneur de grille avec display: grid, puis contrôlez les colonnes avec grid-template-columns et les lignes avec grid-template-rows. Les unités fractionnaires (fr) distribuent l'espace disponible proportionnellement. Les éléments enfants peuvent s'étendre sur plusieurs colonnes ou lignes avec grid-column: span N et grid-row: span N.
Comment utiliser le Générateur CSS Grid
-
Définissez le nombre de colonnes et de lignes avec les champs numériques (1–12 pour chacun).
-
Ajustez grid-template-columns et grid-template-rows pour contrôler les tailles (ex. 1fr 2fr, 200px auto).
-
Définissez l'espacement entre les cellules (ex. 10px, 1rem).
-
Cliquez sur n'importe quelle cellule dans l'aperçu pour la sélectionner (elle devient orange).
-
Définissez col-span et row-span dans le panneau Extension de cellule, puis cliquez sur Appliquer. Les cellules avec extension deviennent vertes.
-
Cliquez sur l'onglet CSS ou HTML pour changer le format de sortie, puis copiez dans le presse-papiers.
-
Cliquez sur Tout réinitialiser pour recommencer avec une nouvelle grille 3×3.