Générateur de CSS Grid
Définissez les colonnes, les lignes et les espaces — choisissez fr, px ou auto par piste, ou saisissez une liste explicite comme «1fr 2fr 1fr». L'aperçu numéroté se met à jour en direct, puis copiez le CSS. Tout fonctionne dans votre navigateur.
Saisissez chaque piste séparée par des espaces, ex. : 1fr 2fr 200px auto.
Tout fonctionne dans votre navigateur. Rien n'est envoyé.
Comment ça fonctionne
Définissez les colonnes et les lignes
Faites glisser les curseurs pour régler le nombre de colonnes, de lignes et les espacements. L'aperçu se remplit de cellules numérotées au fur et à mesure.
Choisissez la taille des pistes
Sélectionnez fr, px ou auto pour des pistes égales, ou activez les listes de pistes explicites pour saisir quelque chose comme «1fr 2fr 1fr» et avoir un contrôle total.
Copiez le CSS
Copiez la règle prête à l'emploi — display, grid-template-columns / rows et gap — en un clic et collez-la dans votre feuille de styles.