Générer des dispositions de grille CSS avec des modèles de colonnes/lignes et contrôles d'espacement
Un générateur CSS grid vous laisse construire une mise en page en grille visuellement — en définissant colonnes et lignes et les espaces entre elles — puis copier le CSS qui la produit. CSS Grid est le système de mise en page le plus puissant de CSS, conçu pour les dispositions bidimensionnelles où l'on contrôle lignes et colonnes en même temps, mais sa syntaxe pour les modèles, fractions et espaces est dense et difficile à imaginer d'après le seul code. Ajuster des colonnes et voir la grille se réorganiser est bien plus rapide que d'éditer des chaînes de modèle à l'aveugle.
Ce qui débloque Grid, c'est l'unité fr et les propriétés grid-template : fr divise l'espace disponible en parts flexibles, un modèle « 1fr 2fr » donne donc deux colonnes dont la seconde est deux fois plus large, et la disposition se réagence de façon responsive sans largeurs fixes en pixels. Combiné à gap pour un espacement cohérent, cela gère les mises en page de pages, galeries d'images, tableaux de bord et grilles de cartes malaisés avec d'anciennes techniques. Cet outil génère du CSS basé sur les standards dans votre navigateur, prêt à coller, pour disposer une grille à l'œil plutôt que par tâtonnement.
fr signifie « fraction » et divise l'espace disponible en parts flexibles. Un modèle « 1fr 1fr 1fr » fait trois colonnes égales, tandis que « 1fr 2fr » fait la seconde colonne deux fois plus large que la première. Contrairement aux pixels fixes, les colonnes fr se flexent pour remplir le conteneur de façon responsive.
Grid est conçu pour les dispositions bidimensionnelles — lignes et colonnes ensemble — comme la structure d'une page entière ou une grille de cartes. Flexbox excelle dans une direction, une seule ligne ou colonne. Beaucoup de designs utilisent Grid pour la mise en page globale et Flexbox dans les composants individuels.
gap définit un espacement cohérent entre les lignes et colonnes de la grille sans ajouter de marges aux éléments eux-mêmes. Elle ne s'applique qu'entre les cellules, pas autour du bord extérieur, ce qui rend un espacement uniforme et prévisible bien plus facile que gérer des marges sur chaque élément.
Oui. Au-delà de définir la grille, on peut indiquer à des éléments individuels de s'étendre sur plusieurs colonnes ou lignes, une carte vedette peut donc s'étirer sur la mise en page tandis que d'autres restent dans des cellules individuelles. Le générateur se concentre sur la définition de la grille ; l'extension se règle par élément avec grid-column et grid-row.
Générateur d'ombre de boîte CSS · Générateur de rayon de bordure CSS · Générateur Flexbox · Générateur d'ombre de texte CSS · Générateur d'animations CSS · Générateur de filtres CSS