Playground CSS Flexbox e Grid
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}Come funziona
Scegli la scheda Flexbox o Grid e costruisci il layout cambiando le vere proprietà CSS del contenitore. L'anteprima sotto i controlli si aggiorna a ogni modifica, e il pannello CSS generato mostra il codice esatto del layout corrente, pronto da copiare con il pulsante Copia il CSS.
Flexbox: flex-direction (row, column, row-reverse, column-reverse), justify-content (da flex-start a space-evenly), align-items (stretch, flex-start, center, flex-end, baseline), flex-wrap (nowrap o wrap) e gap in pixel, da 0 a 100.
Grid: grid-template-columns e grid-template-rows si scrivono come nel CSS (per esempio `1fr 1fr 1fr`, `repeat(4, 1fr)` o `auto 100px`), poi gap in pixel, justify-items e align-items (start, center, end, stretch). Se lasci vuote le righe, il CSS generato non include grid-template-rows.
Con Aggiungi elemento e Togli elemento cambi il numero di box nell'anteprima, da 1 a 12, per vedere come reagisce il layout quando gli elementi aumentano o vanno a capo. Ogni scheda ricorda le sue impostazioni: la griglia parte con 6 elementi su tre colonne, il flexbox con 3 elementi in riga.
È un modo rapido per capire come si comportano davvero justify-content, align-items e grid-template-columns, o per abbozzare un layout prima di scriverlo a mano. Tutto gira nel tuo browser, senza account e senza caricare niente.
Domande frequenti
Che differenza c'è tra justify-content e align-items?
- justify-content distribuisce gli elementi lungo l'asse principale, align-items li allinea sull'asse trasversale. Con flex-direction: row l'asse principale è orizzontale, quindi justify-content sposta gli elementi a destra e sinistra e align-items in alto e in basso; con column i ruoli si invertono. Cambia i due valori nella scheda Flexbox e lo vedi nell'anteprima.
Supporta sia Flexbox sia Grid?
- Sì. Passa dalla scheda Flexbox alla scheda Grid: ognuna ha i suoi controlli per il contenitore, il suo numero di elementi e il suo CSS generato.
Posso copiare il CSS generato?
- Sì. Il pannello CSS generato mostra il codice esatto della classe .container per il layout corrente, e il pulsante Copia il CSS lo mette negli appunti.
Posso impostare flex-grow, order o proprietà dei singoli elementi?
- No. I controlli agiscono solo sul contenitore (direction, justify, align, wrap, gap, colonne e righe); i singoli elementi sono box numerati che puoi aggiungere o togliere, da 1 a 12.
I miei dati vengono salvati da qualche parte?
- No. Tutto gira nel tuo browser e nessun dato viene inviato a un server.