LocalToolsRaccolta di strumenti browser offline

Categoria: Sviluppo

Generatore CSS Grid

Idea internaManca uno strumento?

Crea un layout grid-template e copia il CSS

Imposta il numero di colonne e righe e la spaziatura su un'anteprima grid dal vivo, passando facoltativamente a colonne minmax() così possono restringersi prima di andare a capo, poi copia la dichiarazione finale del contenitore. Niente lascia il tuo browser.

Output
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}

Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.

A cosa serve

grid-template-columns: repeat(n, 1fr) crea colonne uguali che però non si restringono mai sotto il loro contenuto, causando overflow su schermi stretti. Passare a minmax(min, 1fr) permette a ogni colonna di restringersi fino a un minimo prima che la griglia rinunci e vada a capo, la differenza tra un layout leggibile su un telefono e uno che non lo è. Questo strumento costruisce entrambe le forme dagli stessi controlli così la differenza è visibile su una griglia reale, non solo nella dichiarazione.

Come si usa

  1. Imposta il numero di colonne e righe.
  2. Imposta la spaziatura tra le celle.
  3. Attiva le colonne minmax() se vuoi che si restringano su schermi stretti, poi copia il CSS.

Privacy

Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.

Domande frequenti

L'anteprima è una vera griglia CSS?
Sì. Le celle numerate sono disposte con i valori esatti di grid-template-columns e grid-template-rows che stai impostando.
Cosa cambia davvero minmax()?
Senza di esso, le colonne repeat(n, 1fr) restano uguali ma non si restringono oltre il loro contenuto, quindi un contenitore stretto va semplicemente in overflow. minmax(min, 1fr) permette a ogni colonna di restringersi fino al minimo prima che il browser cerchi un altro modo per farle stare.
Viene caricato qualcosa?
No. La dichiarazione è testo costruito a partire dai controlli che imposti, e la griglia di anteprima viene renderizzata localmente nella pagina.

Torna a tutti gli strumenti