CSS grid generator online per layout e aree
Questo css grid generator permette di strutturare layout grafici trascinando il cursore sulle celle della griglia. Imposta il numero di righe, colonne e la spaziatura per generare istantaneamente il codice CSS e HTML pronto all'uso. Funziona interamente nel browser, senza registrazione e senza caricare alcun dato su server esterni.
Come usare il css grid generator online
Per impostare la struttura di base, regola i tre comandi principali: Colonne e Righe accettano valori da 1 a 24, mentre Spaziatura definisce la distanza tra le celle da 0 a 128 pixel.
- Fai clic su una cella e trascina il cursore fino all'angolo opposto per definire un'area rettangolare.
- Rilascia il pulsante per confermare la creazione dell'area definita.
- Fai clic sul blocco CSS o HTML, oppure sul pulsante Copia, per trasferire il codice negli appunti.
Gestione delle aree con il grid template areas generator
Ogni regione creata riceve un nome predefinito come area-1 o area-2. Utilizzando questo css grid template areas generator, puoi personalizzarne il nome nell'elenco Aree inserendo lettere minuscole, cifre, trattini o trattini bassi, iniziando sempre con una lettera.
Le aree devono essere rettangolari e non possono sovrapporsi. Se il trascinamento incrocia un'area esistente, il riquadro diventa rosso e l'operazione viene annullata. Fai clic sull'icona del cestino per eliminare un'area e liberare le relative celle.
Dimensionamento avanzato e valori delle tracce
Di default, le tracce vengono suddivise in parti uguali tramite l'unità frazionaria, come repeat(3, 1fr) per tre colonne. Apri la sezione Dimensionamento avanzato per personalizzare la misura di ogni singola riga o colonna.
I campi accettano valori fissi in pixel come 240px, percentuali 25%, unità 1fr o 2fr, parole chiave come auto, min-content e max-content, oppure funzioni come minmax(100px, 1fr) e fit-content(300px). Se inserisci una sintassi non valida, il campo diventa rosso e il codice impiega automaticamente 1fr.
Creare layout con un css grid generator responsive
Il codice prodotto è CSS standard senza dipendenze o librerie esterne. Per garantire la massima adattabilità del layout ai diversi dispositivi, prediligi l'uso dell'unità fr e della funzione minmax() al posto di valori fissi espressi in pixel.
All'interno delle media query, puoi ridefinire la mappa grid-template-areas per incolonnare le aree sui display più stretti, mantenendo inalterata la struttura HTML.
Integrazione del codice tramite css grid layout generator online
Il generatore definisce la griglia sul contenitore principale con la regola display: grid, applica la distanza desiderata tramite gap e mappa le regioni con grid-template-areas. Le celle che non appartengono ad alcuna area vengono contrassegnate da un punto (.).
Ogni area nominata riceve la propria regola grid-area e un elemento figlio corrispondente nel markup HTML. Puoi usare questo strumento visivo direttamente nel browser.
Domande frequenti
Cos'è un css grid generator?
Un css grid generator è uno strumento visivo che scrive il codice CSS Grid ed HTML in base alla griglia definita dall'utente. Permette di impostare colonne, righe, spaziatura e aree nominate senza dover calcolare le posizioni a mano.
Come funziona grid-template-areas nel layout CSS?
La proprietà grid-template-areas mappa la struttura della griglia associando i nomi delle aree alle celle riga per riga tra virgolette, usando un punto per le celle vuote. Gli elementi figli si associano a ciascuna regione impostando la proprietà grid-area con lo stesso nome.
Cosa indica l'unità fr in CSS Grid?
L'unità fr rappresenta una frazione dello spazio libero rimanente all'interno del contenitore griglia dopo aver calcolato le dimensioni fisse e la spaziatura. Una combinazione impostata su 1fr e 2fr assegna alla seconda traccia il doppio dello spazio rispetto alla prima.
A cosa serve la funzione minmax() nelle colonne?
La funzione minmax(min, max) stabilisce un intervallo di dimensioni entro cui la traccia può ridimensionarsi, mantenendo un valore non inferiore al minimo e non superiore al massimo. Ad esempio, minmax(100px, 1fr) garantisce una larghezza minima di 100 pixel consentendo al contempo l'espansione.
Come si imposta lo spazio tra righe e colonne?
La distanza tra le tracce si imposta tramite la proprietà gap sul contenitore della griglia. Questo valore distribuisce lo spazio in modo uniforme tra righe e colonne senza aggiungere margini sul perimetro esterno del layout.
Come si indicano le celle vuote nelle aree della griglia?
All'interno della sintassi di grid-template-areas, le celle che non appartengono a nessuna area nominata vengono rappresentate da un punto. Lo strumento inserisce automaticamente un punto per ogni cella lasciata vuota nella griglia.
Come rendere un layout CSS Grid responsive?
Per rendere il layout adattabile, si utilizzano tracce con unità fr e la funzione minmax() evitando dimensioni fisse in pixel. Successivamente, all'interno delle media query CSS, è sufficiente ridefinire la stringa grid-template-areas per riorganizzare la disposizione delle aree sugli schermi mobili.
Consigliati
-
Quaderno per Web Design (griglia a punti)Disegna il layout su carta prima di impostarlo sullo schermo.
-
CSS: The Definitive Guide (Meyer & Weyl)La guida di riferimento per capire ogni singola proprietà grid del codice.
-
Monitor portatile 15,6" (USB-C)Tieni l'anteprima su un secondo schermo mentre ritocchi la griglia.
Aiuta a mantenere gratuiti gli strumenti. ✨
Le immagini sono solo a scopo illustrativo. In qualità di Affiliato Amazon io ricevo un guadagno dagli acquisti idonei.
