Générateur de grille CSS
Créez visuellement des mises en page de grille CSS : définissez les lignes et les colonnes, copiez le code.
Comment utiliser Générateur de grille CSS
- Définir les colonnes et les lignes — nombre et tailles (fr pour flexible, px pour fixe).
- Ajuster l'écart — l'espacement intégré de la grille entre toutes les pistes.
- Aperçu de la structure — les éléments remplissent les cellules dans l'ordre source.
- Copiez le CSS du conteneur — et ajoutez des règles d'étendue par élément pour les cellules qui doivent s'étirer.
Qu'est-ce que Générateur de grille CSS ?
Un générateur de grille CSS crée visuellement des mises en page bidimensionnelles : choisissez le nombre de colonnes et de lignes, dimensionnez-les (l'unité fr, les pixels fixes ou les mélanges), définissez l'espace, prévisualisez le résultat et copiez le display: grid ; grid-template-columns : … CSS.
Grid est le système CSS pour les mises en page qui s'alignent dans les deux dimensions : échafaudages de pages, tableaux de bord, galeries d'images, mises en page de formulaires. Sa syntaxe est compacte mais abstraite (grid-template-columns: 250px 1fr 1fr décrit une barre latérale plus deux colonnes en cinq jetons) ; le générateur rend l'abstraction visible avant de la valider dans une feuille de style.
À propos de Générateur de grille CSS
Définissez vos colonnes et vos lignes, dimensionnez les pistes, ajustez l'espace et copiez le CSS généré pour le conteneur.
Maîtrise du dimensionnement des pistes, rapidement : 1fr 1fr 1fr correspond à trois colonnes flexibles égales ; 250px 1fr est le shell classique à contenu fluide à barre latérale fixe ; repeat(3, 1fr) abrége les pistes égales ; et le joyau de la couronne repeat(auto-fit, minmax(250px, 1fr)) crée une grille de cartes réactive — autant de colonnes ≥250px que possible, aucune requête multimédia — la recette de grille la plus copiée qui existe.
La bibliothèque de modèles qu'elle accélère : galeries de photos (grilles d'ajustement automatique), panneaux de tableau de bord (zones explicites), formulaires avec colonnes d'étiquettes/champs alignés et le shell de page du Saint Graal (en-tête couvrant toutes les colonnes, barre latérale, principale, pied de page) que les systèmes de mise en page ont recherché pendant deux décennies et que Grid distribue en six lignes. Les éléments se placent automatiquement dans l'ordre d'origine ; le spanning (un élément couvrant plusieurs pistes) ajoute grid-column : span 2 par élément.