Generatore CSS Grid

fr sta per "frazione dello spazio libero disponibile". Dopo che le colonne a dimensione fissa (px, auto) occupano il loro spazio, la larghezza rimanente viene divisa in frazioni. grid-template-columns: 1fr 2fr 1fr crea tre colonne in cui quella centrale ottiene il doppio dello spazio rispetto a ciascuna colonna laterale. Usare fr e il modo preferito per creare grid fluide che si adattano a diverse larghezze dello schermo senza media query.

Separa ogni dimensione di traccia con uno spazio: grid-template-columns: 200px 1fr 1fr crea una barra laterale fissa da 200px e due colonne fluide uguali. Puoi mescolare unita: 1fr auto 1fr fa restringere la colonna centrale alla larghezza del suo contenuto. La notazione abbreviata repeat() semplifica la ripetizione: repeat(3, 1fr) e identica a 1fr 1fr 1fr. Questo strumento genera la notazione abbreviata corretta nell'output CSS.

gap (in precedenza grid-gap) aggiunge spazio tra le tracce della grid, non sui bordi esterni. Questo e quasi sempre cio che si vuole: gutters uniformi tra le celle senza padding aggiuntivo attorno al contenitore. margin aggiunge spazio attorno ai singoli elementi della grid, il che diventa incoerente ai bordi e si aggiunge alla dimensione complessiva del contenitore. Usa gap per i gutters e padding sul contenitore della grid per respirabilita attorno all'intero layout.

Imposta grid-column-start e grid-column-end sull'elemento. Ad esempio, grid-column: 1 / 3 fa iniziare l'elemento alla linea 1 e terminare alla linea 3, estendendosi su 2 colonne. Puoi anche usare la parola chiave span: grid-column: span 2. La stessa logica si applica alle righe con grid-row. Seleziona un elemento della grid in questo strumento e imposta i valori di inizio/fine per generare automaticamente il CSS corretto.

Entrambi funzionano con repeat() per creare tutte le tracce che entrano nel contenitore: repeat(auto-fill, minmax(200px, 1fr)). La differenza emerge quando gli elementi non riempiono tutte le colonne disponibili. auto-fill mantiene le colonne vuote nella grid, conservando la struttura delle tracce. auto-fit comprime le colonne vuote a zero e lascia che gli elementi presenti si espandano per usare lo spazio. Per la maggior parte delle grid di card responsive, auto-fit offre il comportamento piu naturale.

grid-template-areas consente di definire il layout con una mappa visuale in stile ASCII. Esempio: grid-template-areas: "header header" "sidebar content" "footer footer". Poi assegna gli elementi alle aree con grid-area: header, grid-area: sidebar, ecc. Questo rende i layout complessi leggibili e facili da ristrutturare con una media query — basta ridefinire grid-template-areas per il nuovo breakpoint.

No. Tutto funziona nel tuo browser. Le configurazioni della tua grid non lasciano mai il tuo dispositivo.