Costruttore di griglie CSS
CSS Grid Builder
Dispone una griglia in modo visivo con le aree nominate e restituisce il CSS di grid-template.
Disegna aree con un nome su una griglia facendo clic sulle celle, le verifica contro la regola del rettangolo della specifica ed emette `grid-template-areas` — oppure i numeri di riga, se si preferisce. La verifica conta perché un elenco di aree non valido viene buttato via in silenzio, senza alcun errore da nessuna parte.
Griglia
Una cella di dimensione accetta 1fr·240px·auto·minmax(200px, 1fr).
Clicca una cella per darle il nome di area qui sotto. Clicca una cella e poi un’altra: il rettangolo tra le due viene riempito come una sola area. Cliccando di nuovo una cella con lo stesso nome la svuoti.
CSS
Anteprima
C’è una sola regola da ricordare
Un’area con un nome deve essere un rettangolo (CSS Grid Level 2 §7.3.1). Fai una forma a L e l’intera dichiarazione grid-template-areas viene buttata via senza alcun errore, ed è per questo che lo strumento te lo dice prima di scrivere il CSS. Tre o più tracce identiche di fila si scrivono con repeat().
Per un layout a una sola dimensione, il banco di prova per flexbox è più semplice.
Come si usa
Partire da un layout
Intestazione-barra laterale-contenuto-piè di pagina, una fila di schede, un cruscotto, un articolo centrato. Oppure costruirne uno proprio da una griglia vuota.
Dare un nome a un’area e fare clic sulle celle
Si digita il nome e poi si fa clic. Un clic su una cella e poi su un’altra riempie il rettangolo compreso fra le due; un altro clic su una cella con lo stesso nome la libera.
Impostare le dimensioni delle tracce
I riquadri in alto e a sinistra accettano `1fr`, `240px`, `auto` oppure `minmax(200px, 1fr)`. Tre o più tracce identiche vengono scritte con `repeat()`.
Domande frequenti
Perché la mia area a L non funziona?
Perché un’area con un nome deve essere un rettangolo — CSS Grid Level 2 §7.3.1. Se non lo è, l’intera dichiarazione `grid-template-areas` non è valida e il browser la scarta senza alcun errore. Questo strumento lo dice prima di scrivere il CSS, ed è l’unico avviso che si otterrà.
Aree con nome o numeri di riga?
Le aree si leggono meglio e sopravvivono all’inserimento di una traccia. I numeri di riga sono l’unica scelta possibile quando un elemento occupa una traccia che non esiste in tutti i breakpoint, oppure quando la griglia è generata. L’interruttore scrive l’una o l’altra forma.
Come si lascia vuota una cella?
Non dandole un nome. Nel template viene scritta come `.`, che è il simbolo di cella nulla della specifica: un punto per ogni cella vuota, e anche una sequenza di punti deve comunque lasciare rettangolare ogni area con un nome.
Perché `fr` non si restringe sotto il contenuto?
Perché `1fr` significa `minmax(auto, 1fr)`, e quel minimo `auto` è la dimensione del contenuto. Si usa `minmax(0, 1fr)` quando serve una traccia che possa davvero diventare più stretta di ciò che contiene: è il rimedio classico per un figlio della griglia che si rifiuta di restringersi.
Può ricevere da
Banco di prova per flexbox
Flexbox Playground
Cambia ogni proprietà flex su un esempio dal vivo e mostra il CSS e che cosa ha cambiato ciascuna proprietà.
Calcolo delle dimensioni fluide
Fluid Size Calculator
Calcola l’espressione clamp() che fa variare una dimensione con continuità fra due larghezze di viewport.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Calcolo delle dimensioni fluide
Fluid Size Calculator
Calcola l’espressione clamp() che fa variare una dimensione con continuità fra due larghezze di viewport.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Banco di prova per flexbox
Flexbox Playground
Cambia ogni proprietà flex su un esempio dal vivo e mostra il CSS e che cosa ha cambiato ciascuna proprietà.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.