Vai al contenuto
OneKitly
Registrati · Accedi

Generatore di CSS Grid

Costruisci un layout CSS Grid visivamente — colonne, righe, spazi e allineamento — con anteprima dal vivo e CSS copiabile.

Strumenti correlati

Tutti gli strumenti: Colori e CSS →
Generatore di ombra CSS (box-shadow)Regola un'ombra CSS con anteprima dal vivo e copia il codice generato — offset, sfocatura, estensione, colore, inset.Compressore CSSMinifica il CSS rimuovendo commenti e spazi per ridurre la dimensione del foglio di stile.Laboratorio di CSS FlexboxSperimenta con flex-direction, wrap, justify-content, align-items e gap — anteprima dal vivo e CSS copiabile.Abbellitore CSSRiformatta CSS minificato o disordinato in regole pulite e indentate — o minificalo di nuovo.Verificatore di contrasto dei coloriRapporto di contrasto WCAG tra testo e sfondo, con esito AA/AAA e anteprima dal vivo.Invertitore di coloreInverti un colore (255 − RGB) o prendi il complementare, in HEX/RGB/HSL/CMYK con il contrasto.Generatore di schemi di coloreDeriva schemi complementare, analogo, triadico, tetradico, diviso e monocromatico da un colore base.Generatore di gradienti CSSCrea un gradiente CSS lineare o radiale da due colori e un angolo, con output CSS e Tailwind.

Apri Generatore di CSS Grid e ottieni subito una risposta, senza creare un account. Lo trovi sotto Colori e CSS, con Generatore di ombra CSS (box-shadow) e Compressore CSS per i casi vicini.

Come si usa

  1. Apri lo strumento — senza registrazione né installazione.
  2. Inserisci i tuoi dati o regola le opzioni disponibili.
  3. Ottieni il risultato all'istante, poi copialo o scaricalo.

Domande frequenti

Che cos'è Generatore di CSS Grid?

Costruisci un layout CSS Grid visivamente — colonne, righe, spazi e allineamento — con anteprima dal vivo e CSS copiabile.

In quali casi si usa davvero?

Portare un colore da uno strumento di design a un foglio di stile, costruire una palette attorno a un colore di marca e verificare che il testo vi resti leggibile.

Qual è l'errore più comune?

Giudicare il contrasto a occhio. Due colori che sembrano distinti su un monitor luminoso possono fallire nettamente il rapporto di accessibilità, ed è quel rapporto che un audit misurerà.

In cosa differisce Generatore di CSS Grid da Generatore di ombra CSS (box-shadow)?

Sono vicini ma rispondono a domande diverse. Generatore di ombra CSS (box-shadow): regola un'ombra CSS con anteprima dal vivo e copia il codice generato — offset, sfocatura, estensione, colore, inset. Scegli quello che corrisponde al tuo punto di partenza — entrambi sono gratuiti.

Esiste uno strumento per il passo successivo?

Compressore CSS è il più vicino dopo questo: Minifica il CSS rimuovendo commenti e spazi per ridurre la dimensione del foglio di stile.

Cos'altro conviene tenere aperto accanto?

Laboratorio di CSS Flexbox e Abbellitore CSS: ricorrono nella stessa attività abbastanza spesso da meritare una seconda scheda.

Da dove vengono i dati?

Le conversioni tra HEX, RGB e HSL sono esatte. Il contrasto segue la formula di luminanza relativa WCAG 2; il CMYK dipende dal dispositivo, quindi un valore a schermo è un'approssimazione della stampa.

Per approfondire

Tutte le guide →
SpiegazioneGradienti, banding e perché il centro sembra spentoInterpolare in sRGB fa la media di numeri codificati in gamma: il punto medio da rosso a verde è #808000 quando la risposta a mezza luce è #bcbc00 — il 57,2 % di luce in meno. Il banding è un problema aritmetico distinto: 8 bit danno 256 gradini, e un gradiente scuro può averne solo 28. Ecco entrambi, calcolati.SpiegazioneGli schemi di colore sono geometria su una ruota — e la ruota è sbagliataComplementare, triade, analogo e complementare diviso sono solo rotazioni: aggiungi 180°, 120°, 30° o 150° a una tinta. L'aritmetica è banale. Il problema è che il cerchio delle tinte HSL non è percettivamente uniforme — giallo e blu alla stessa luminosità HSL differiscono di 12,85 volte in luminanza — quindi una tavolozza generata va poi verificata nel contrasto.GuidaChe cosa può togliere un minificatore e che cosa non deve toccareLa minificazione deve preservare il significato, e la parte interessante è lo spazio bianco che porta significato: il combinatore discendente, gli spazi dentro calc(), lo stacco fra due elementi inline. Misurato qui su file reali, compreso ciò che brotli ti avrebbe risparmiato comunque.SpiegazioneRapporto di contrasto: come lo calcola davvero la WCAGIl rapporto WCAG è (L1 + 0,05) ÷ (L2 + 0,05), e L è la luminanza relativa, non la luminosità. Il verde ne porta il 71,52 % e il blu il 7,22 %, ecco perché il blu puro su bianco passa a 8,59:1 mentre il grigio medio fallisce a 3,95:1. Ecco l'intero calcolo, eseguito dall'inizio alla fine.TutorialHEX vs RGB: leggere e convertire i coloriHEX e RGB sono due notazioni per gli stessi colori. Ecco come leggere ciascuna, convertire tra loro e aggiungere trasparenza.GuidaFormattare o minificare: a cosa serve ciascuno e cosa cambia sul pesoQuattro fogli di stile veri passati nel minificatore, misurati grezzi e dopo gzip. Togliere tutti gli spazi ha fatto risparmiare 48, 103, 104 e 147 byte compressi; togliere i commenti 57, 1 358, 2 420 e 1 042. E i cinque input che questo minificatore rompe.