Générateur de Grid CSS
Définissez vos colonnes et vos lignes, faites glisser sur les cellules pour placer des éléments, et copiez le CSS de la grille avec son HTML en un clic.
Votre grille est construite dans votre navigateur. Rien de ce que vous réglez ici n’est envoyé à BroBroGo.
FAQ
Comment placer des éléments sur la grille ?
Maintenez et faites glisser sur les cellules pour tracer un rectangle : au relâchement, il devient un enfant qui couvre ces colonnes et ces lignes. Chaque élément que vous tracez reçoit sa propre règle grid-column et grid-row dans le CSS et un div correspondant dans le HTML. Les éléments peuvent se chevaucher, et le dernier tracé passe au-dessus ; utilisez le × de l’élément pour le retirer.
Les colonnes et les lignes peuvent-elles avoir des tailles différentes ?
Oui. Chaque piste a sa propre case de taille, où vous pouvez saisir n’importe quelle valeur de grille : 1fr, 200px, auto, min-content ou minmax(120px, 1fr). Les pistes de même taille sont regroupées en repeat() pour garder un code court. L’espacement des colonnes et celui des lignes se règlent séparément et fusionnent en un seul gap lorsqu’ils coïncident.
Que faire du code généré ?
Copiez le CSS et le HTML ensemble. Le HTML vous donne le conteneur avec un div par élément, et le CSS définit la grille et place chacun. Collez les deux dans votre projet et vous obtenez la même mise en page que celle tracée ici.