.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}Qu'est-ce que le générateur de grille CSS ?
Le générateur de grille CSS est un générateur visuel pour la disposition de grille CSS. Vous choisissez le nombre de colonnes et de lignes que vous souhaitez, choisissez une taille de piste pour chaque axe, définissez les espaces et l'alignement, et une grille d'aperçu se réorganise en temps réel. Le CSS exact qui produit ce que vous voyez se trouve dans une boîte prête à copier en dessous, vous n'avez donc jamais à écrire des colonnes de modèle de grille à la main ou à compter les unités de fraction dans votre tête.
CSS Grid est un modèle de mise en page bidimensionnel Contrairement à flexbox, qui pose des éléments le long d'un seul axe, la grille contrôle les lignes et les colonnes en même temps Le conteneur maintient la structure à travers un petit ensemble de propriétés : grille-modèle-colonnes et grille-modèle-rangées définissent les pistes, l'écart ajoute l'espacement entre elles, et les éléments justifiés, aligner-éléments, justifier-contenu et aligner-contenu positionnent les éléments et les pistes Cet outil expose ces propriétés dans un panneau et montre le résultat immédiatement.
Le générateur utilise la fonction de répétition () pour tout axe avec plus d'une piste, donc grille-modèle-colonnes : répétez (3, 1 fr) est ce que vous obtenez pour une grille à trois colonnes de colonnes égales plutôt qu'une liste répétitive L'unité fr représente une fraction de l'espace libre dans le conteneur, ce qui rend les dispositions de grille fluides : trois colonnes de 1 fr prennent chacune un tiers de la largeur et refluent à mesure que le conteneur se redimensionne Vous pouvez également mélanger des pistes auto, min-content, max-content et pixel fixe du menu de la taille de la piste.
Tout tourne entièrement dans votre navigateur Il n'y a pas d'inscription, rien n'est téléchargé et l'outil continue de fonctionner hors ligne une fois la page chargée Il est utile à la fois comme aide à l'apprentissage, car vous pouvez regarder comment chaque propriété change la mise en page, et comme moyen rapide de produire un CSS de grille prêt pour la production pour une galerie, un tableau de bord, une mise en page de carte ou un shell pleine page La règle générée cible une classe .grid-container et répertorie uniquement les propriétés qui ont un effet visible, de sorte que la sortie reste propre.
Comment utiliser le générateur de grille CSS ?
Définissez les colonnes et les lignes
Choisissez le nombre de colonnes et de lignes que la grille doit avoir et regardez l'aperçu construire les cellules.
Choisissez les tailles de piste
Sélectionnez une taille pour les colonnes et les lignes, telles que 1 fr, auto, min-content ou une valeur de pixel fixe.
Réglez les lacunes et l’alignement
Définissez les espaces entre les lignes et les colonnes, puis ajustez justifier et aligner pour positionner les éléments et les pistes.
Copiez le CSS
Copiez la règle de grille générée et collez-la dans votre feuille de style, ou continuez à peaufiner l'aperçu.
Principales caractéristiques
Aperçu en direct
Une grille réelle se réafflue lorsque vous modifiez les colonnes, les lignes, la taille des pistes, les espaces et l'alignement.
sortie répétition ()
Les axes multipistes utilisent la (les) répétition (s) pour les valeurs courtes et lisibles de grille-modèle au lieu des listes répétées.
fr et pistes de contenu
Choisissez des unités de fraction, des pixels automatiques, à contenu min, à contenu max ou fixes pour chaque axe.
Des espaces séparés entre les lignes et les colonnes
Définissez les espaces indépendamment ; l'outil émet automatiquement le raccourci d'espace ou une seule valeur.
Frequently Asked Questions
Related Tools
CSS Animation Generator
Build CSS keyframe animations from presets like fade, slide, bounce and spin. Adjust duration, easing, delay, iteration and direction, preview live, then copy the keyframes and animation shorthand.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
JWT Generator
Generate and sign JSON Web Tokens with HS256, HS384, or HS512, add standard claims, and copy the token. Runs client-side.
Comments
0 comments
No comments yet. Be the first to share your thoughts!