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, imposta le proprietà del contenitore e apri le Impostazioni per dare stile a ogni figlio: order, flex-grow, flex-shrink, flex-basis e align-self in modalità Flex, oppure span di colonna/riga e align-self in modalità Grid. La modalità Grid offre anche dimensionamenti di tracce personalizzati — digita qualsiasi valore di grid-template-columns/rows come 200px 1fr o repeat(auto-fit, minmax(120px, 1fr)) — e un editor visivo grid-template-areas dove nomini ogni cella, il che crea anche linee di griglia nominate. Un'anteprima dal vivo di tessere numerate riflette ogni modifica, e puoi esportare solo la regola .container o il contenitore più il CSS per elemento.

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. Imposta le proprietà del contenitore — flex-direction/wrap e justify/align, oppure il numero di colonne e righe con justify-items/align-items.
3. Apri le Impostazioni per cambiare il gap e il numero di elementi e per dare stile a ogni figlio (order, flex-grow/shrink/basis, align-self o span di colonna/riga).
4. In Grid, porta il dimensionamento tracce su Personalizzato per digitare i tuoi grid-template-columns/rows — px, fr, minmax() o repeat(auto-fit/auto-fill, …).
5. Attiva l'editor grid-template-areas e nomina ogni cella per posizionare gli elementi per area.
6. Scegli se esportare solo il CSS del contenitore o il contenitore più il CSS per elemento, poi copia il risultato.

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 · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

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

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

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

.container > :nth-child(2) {
  flex-grow: 1;
}

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 li organizza in due dimensioni con grid-template-columns e grid-template-rows più justify-items e align-items. Cambia modalità con l'interruttore per confrontare come ciascuna gestisce lo stesso allineamento.

Come do uno stile ai singoli elementi?

Apri le Impostazioni e usa i controlli per elemento per impostare order, flex-grow, flex-shrink, flex-basis e align-self (Flex) o span di colonna/riga e align-self (Grid) su ogni figlio. Imposta Esporta su 'Contenitore + elementi' e lo strumento aggiunge una regola .container > :nth-child(n) per ogni elemento che personalizzi.

Posso usare dimensioni di traccia personalizzate come auto-fit o minmax()?

Sì. In modalità Grid porta il dimensionamento tracce su Personalizzato e digita un valore valido di grid-template-columns/rows — pixel, unità fr, minmax() o repeat(auto-fit/auto-fill, minmax(120px, 1fr)) per colonne responsive. L'anteprima e il CSS generato si aggiornano mentre digiti.

Cosa fa l'editor grid-template-areas?

Attivalo in modalità Grid e nomina ogni cella della griglia; lo strumento assembla una dichiarazione grid-template-areas e le celle vuote diventano un punto. Nominare le aree crea anche linee di griglia nominate, e puoi posizionare un figlio in un'area digitando il suo nome nel campo grid-area di quell'elemento.

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.