Générateur de Grid CSS
Définissez vos colonnes et vos lignes, glissez votre curseur sur les cellules pour positionner vos éléments et copiez le code CSS de la grille ainsi que le code HTML associé en un clic.
Votre grille est générée directement dans votre navigateur. Rien de ce que vous configurez ici n'est téléversé vers BroBroGo.
FAQ
Comment puis-je placer des éléments sur la grille?
Cliquez et glissez votre curseur sur les cellules pour délimiter un rectangle — lorsque vous relâchez, cela crée un élément enfant positionné sur ces colonnes et lignes. Chaque élément tracé génère ses propres règles grid-column et grid-row dans le CSS, ainsi qu'une balise div correspondante dans le HTML. Les éléments peuvent se chevaucher, le plus récent s'affichant au-dessus; utilisez l'icône × sur un élément pour le supprimer.
Les colonnes et les lignes peuvent-elles avoir des tailles différentes?
Oui. Chaque piste dispose de son propre champ de saisie de taille, où vous pouvez spécifier n'importe quelle valeur valide en CSS Grid — comme 1fr, 200px, auto, min-content ou minmax(120px, 1fr). Les pistes partageant la même taille sont regroupées à l'aide de la fonction repeat() pour optimiser le code. L'espacement des colonnes (column gap) et des lignes (row gap) se configurent séparément, et fusionnent en une seule propriété gap lorsqu'ils sont identiques.
Que dois-je faire avec le code généré?
Copiez le code CSS et le code HTML générés. Le HTML fournit la structure du conteneur avec un div pour chaque élément, tandis que le CSS définit la grille et positionne chacun d'eux. Collez les deux dans votre projet pour obtenir exactement la mise en page que vous avez dessinée.