Generatore CSS Grid

CSS Grid è per i layout 2D (righe + colonne), mentre Flexbox è per i layout 1D (riga o colonna). Grid è più adatto a layout di pagina complessi.

L'fr (fraction) è un'unità proporzionale usata in CSS Grid. Ad esempio, 1fr 2fr divide lo spazio in un rapporto di 1:2. È molto utile per i layout responsive.

Sì. Scrivendo repeat(auto-fit, minmax(240px, 1fr)) fissi solo la larghezza minima della colonna e lasci il resto al browser: le colonne si aggiungono quando la finestra cresce e spariscono quando si stringe, coprendo dal telefono al desktop senza un solo breakpoint. Attenzione: auto-fill lascia tracce vuote nello spazio residuo mentre auto-fit allunga quelle esistenti per riempirlo, quindi i due differiscono quando gli elementi sono pochi.

Gli elementi di griglia hanno per impostazione predefinita dimensione minima auto e quindi rifiutano di restringersi sotto il proprio contenuto: un URL lungo o una parola non spezzabile allarga l'intera colonna. Impostare min-width: 0 su quell'elemento permette alla griglia di ridurlo di nuovo, e aggiungere overflow-wrap: anywhere manda a capo la stringa lunga. Definire la traccia come minmax(0, 1fr) anziché come semplice 1fr elimina la causa alla radice, ed è per questo che se ne fa largo uso.