Playground CSS Flexbox e Grid

Cos'è Playground CSS Flexbox e Grid?

Il Playground CSS Flexbox e Grid è una sandbox visiva gratuita per imparare e prototipare i due principali modelli di layout di CSS, pensata per sviluppatori front-end, studenti e designer. Scegli Flex o Grid con l'interruttore di modalità, poi imposta le proprietà del contenitore con semplici menu a tendina e campi numerici: in modalità Flex controlli flex-direction, flex-wrap, justify-content e align-items; in modalità Grid indichi quante colonne e righe (rese come repeat(n, 1fr)) oltre a justify-items e align-items. Un valore di gap e un numero di elementi si applicano a entrambe. Un'anteprima dal vivo di tessere numerate mostra esattamente come si comportano allineamento e spaziatura, e l'intera regola .container CSS viene generata da copiare. Usalo ogni volta che vuoi vedere come appare davvero un'impostazione flex o grid prima di incollarla nel tuo progetto.

Come usare Playground CSS Flexbox e Grid

1. Scegli Flex o Grid con l'interruttore di modalità per decidere quale modello di layout costruire.
2. In modalità Flex, imposta flex-direction, flex-wrap, justify-content e align-items dai menu a tendina.
3. In modalità Grid, imposta il numero di colonne e righe, oltre a justify-items e align-items.
4. Apri le Impostazioni per cambiare il gap (spaziatura in px) e il numero di elementi mostrati nell'anteprima.
5. Osserva l'anteprima delle tessere riordinarsi man mano che cambi ogni proprietà.
6. Copia la regola .container CSS generata e incollala nel tuo foglio di stile.

Esempi

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

Domande frequenti

Qual è la differenza tra Flexbox e Grid qui?

La modalità Flex dispone gli elementi lungo un singolo asse ed espone flex-direction, flex-wrap, justify-content e align-items. La modalità Grid organizza gli elementi in una griglia bidimensionale usando grid-template-columns e grid-template-rows (scritte come repeat(n, 1fr)) con justify-items e align-items. Cambia modalità con l'interruttore per confrontare come ciascun modello gestisce lo stesso allineamento.

Cosa fa il valore di gap?

Il gap imposta, in pixel, lo spazio tra ogni elemento sia nei layout Flex sia in quelli Grid tramite la proprietà CSS gap. Aumentalo per distanziare le tessere o impostalo a 0 per un layout compatto; l'anteprima e il CSS generato si aggiornano all'istante.

Perché justify-content e align-items si scrivono in modo diverso in Grid?

Grid usa le parole chiave start, end, center e stretch per justify-items e align-items, mentre Flex usa flex-start e flex-end. Lo strumento produce le parole chiave corrette in base alla modalità in cui ti trovi, quindi il CSS copiato è sempre valido.

Posso cambiare quanti elementi vengono mostrati?

Sì. Apri le Impostazioni e cambia il numero di elementi per aggiungere o rimuovere le tessere numerate dell'anteprima (fino a 24). Questo influisce solo sulla dimostrazione a schermo; il CSS generato descrive il contenitore, non gli elementi stessi.

I miei dati vengono caricati da qualche parte?

No. Il playground gira interamente nel tuo browser con JavaScript, quindi le tue impostazioni e il CSS generato non vengono mai inviati a un server. Funziona in modo privato e persino offline una volta caricata la pagina.