.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}Che cos'è il CSS Grid Generator?
Il generatore di griglia CSS è un generatore visivo per il layout di griglia CSS Scegli quante colonne e righe desideri, scegli una dimensione della traccia per ciascun asse, imposta gli spazi vuoti e l'allineamento e una griglia di anteprima si riorganizza in tempo reale L'esatto CSS che produce ciò che vedi si trova in una casella pronta per la copia sotto, quindi non devi mai scrivere colonne-modello-griglia a mano o contare le unità di frazione nella tua testa.
CSS Grid è un modello di layout bidimensionale A differenza di flexbox, che pone gli elementi lungo un unico asse, griglia controlli righe e colonne allo stesso tempo Il contenitore tiene la struttura attraverso un piccolo insieme di proprietà: griglia-template-colonne e griglia-template-righe definiscono le tracce, spazio aggiunge spaziatura tra di loro, e giustificare-elementi, allineare-elementi, giustificare-contenuto e allineare-contenuto posizionare gli elementi e le tracce Questo strumento espone tali proprietà in un pannello e mostra il risultato immediatamente.
Il generatore utilizza la funzione repeat () per qualsiasi asse con più di una traccia, quindi griglia-modello-colonne: repeat (3, 1fr) è ciò che si ottiene per una griglia a tre colonne di colonne uguali anziché un elenco ripetitivo L'unità fr rappresenta una frazione dello spazio libero nel contenitore, che è ciò che rende fluidi i layout della griglia: tre colonne da 1fr prendono ciascuna un terzo della larghezza e rifluiscono mentre il contenitore si ridimensiona È anche possibile mescolare tracce auto, min-content, max-content e pixel fissi dal menu track-size.
Tutto viene eseguito interamente nel browser Non c'è iscrizione, non viene caricato nulla e lo strumento continua a funzionare offline una volta caricata la pagina È utile sia come aiuto all'apprendimento, perché puoi guardare come ogni proprietà cambia il layout, sia come modo veloce per produrre CSS a griglia pronti per la produzione per una galleria, un dashboard, un layout di scheda o una shell di pagina completa La regola generata prende di mira una classe 'grid-container ed elenca solo le proprietà che hanno un effetto visibile, quindi l'output rimane pulito.
Come utilizzare il generatore di griglia CSS?
Imposta colonne e righe
Scegli quante colonne e righe dovrebbe avere la griglia e guarda l'anteprima costruire le celle.
Dimensioni delle tracce di prelievo
Selezionare una dimensione per le colonne e le righe, ad esempio 1fr, auto, min-content o un valore di pixel fisso.
Sintonizzare gli spazi vuoti e l'allineamento
Imposta gli spazi tra righe e colonne, quindi regola giustifica e allinea per posizionare elementi e tracce.
Copia il CSS
Copia la regola della griglia generata e incollalala nel foglio di stile oppure continua a modificare l'anteprima.
Caratteristiche principali
Anteprima live
Una griglia reale si rifà mentre si cambiano colonne, righe, dimensioni delle tracce, spazi vuoti e allineamento.
repeat() uscita
Gli assi multitraccia utilizzano repeat () per valori grid-template brevi e leggibili invece di elenchi ripetuti.
tracce FR e contenuti
Scegli unità di frazione, auto, min-content, max-content o pixel fissi per ciascun asse.
Spazi separati di righe e colonne
Imposta gli spazi vuoti in modo indipendente; lo strumento emette automaticamente la scorciatoia o un singolo valore.
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!