Generatore Flexbox e Grid

Come usare il generatore Flexbox e Grid

1. Scegli un Layout: Flexbox o Grid, oppure parti da uno dei Modelli (Centrato, Barra di navigazione, Card a capo, Barra laterale, Griglia di card responsive, Holy grail, 12 colonne).
2. Imposta le proprietà del Contenitore. Per flexbox: flex-direction e flex-wrap. Per grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items e grid-template-areas. Entrambi condividono justify-content, align-items, align-content, row-gap (px) e column-gap (px).
3. Gestisci gli Elementi con Aggiungi elemento, Rimuovi l’elemento selezionato e Reimposta l’elemento selezionato. Clicca su un elemento nell’anteprima (o raggiungilo con Tab e premi Invio) per selezionarlo.
4. Modifica l’elemento selezionato: order e align-self in entrambe le modalità, flex-grow, flex-shrink e flex-basis per flexbox, e grid-area, grid-column, grid-row e justify-self per grid.
5. Copia il Codice CSS e il corrispondente Codice HTML con i rispettivi pulsanti Copia.

Ogni controllo è un normale campo di modulo, quindi l’intero strumento funziona anche solo con la tastiera. Il CSS contiene soltanto le proprietà che hai modificato rispetto ai valori predefiniti, il che lo mantiene breve, e gli elementi con impostazioni identiche condividono un’unica regola (.item quando coincidono tutti).

Flexbox in breve

Flexbox dispone gli elementi lungo un solo asse. flex-direction imposta l’asse principale (una riga o una colonna); justify-content distribuisce gli elementi lungo di esso (center, space-between…) e align-items li posiziona sull’asse trasversale. Con flex-wrap: wrap, gli elementi che non ci stanno vanno a capo su una nuova riga, e align-content distribuisce poi lo spazio tra le righe.

Ogni elemento ha tre proprietà di dimensionamento, di solito scritte insieme come flex:

• flex-basis: la dimensione di partenza (auto usa il contenuto o la width);
• flex-grow: quanta parte dello spazio libero prende l’elemento (0 = niente, 1 = una quota uguale alle altre);
• flex-shrink: quanto cede quando lo spazio non basta (0 = non si restringe mai).

Il modello Barra laterale mostra lo schema classico: una barra laterale con flex-basis: 200px e flex-shrink: 0, e un’area principale con flex-grow: 1.

CSS Grid in breve

Grid dispone gli elementi in due dimensioni. grid-template-columns: repeat(3, 1fr) crea tre colonne uguali; fr è una frazione dello spazio libero. repeat(auto-fill, minmax(120px, 1fr)) crea tante colonne larghe almeno 120px quante ne entrano, ottenendo una griglia di card responsive senza nessuna media query.

Gli elementi riempiono le celle in ordine, a meno che tu non li posizioni: grid-column: span 2 rende un elemento largo due colonne, e grid-column: 1 / -1 lo estende su tutta la riga.

grid-template-areas ti permette di disegnare il layout con dei nomi. Scrivi una riga della griglia per ogni riga di testo, per esempio header header e poi nav main, e assegna agli elementi grid-area: header o grid-area: main. Un punto indica una cella vuota. Ogni riga deve avere lo stesso numero di celle e ogni nome deve formare un rettangolo; in caso contrario lo strumento ti avvisa.