Generatore CSS grid
Trasforma uno schema di layout in testo in una vera griglia CSS con aree denominate.
Generatore CSS grid
Incolla uno schema rapido di layout e questo strumento lo trasforma in codice CSS grid funzionante. Scrivi ogni riga del layout sulla sua propria linea e ripeti la stessa parola nelle celle per contrassegnare un'area denominata — « header header » su una riga, « nav main » sulla successiva, « footer footer » sull'ultima descrive un layout classico a tre righe con intestazione e piè di pagina a larghezza intera. Lo strumento legge i nomi ripetuti come aree di griglia e genera automaticamente la dichiarazione grid-template-areas corrispondente.
Le opzioni controllano il resto del CSS generato. Imposta lo spazio tra le celle in pixel e facoltativamente fornisci larghezze di colonna o altezze di riga esplicite utilizzando qualsiasi dimensione di traccia CSS valida — unità fr, auto o minmax(); lascia vuoto l'uno o l'altro campo e lo strumento distanzierà le tracce uniformemente. Attiva le regole per area per ottenere una dichiarazione grid-area pronta all'uso per ogni sezione denominata, utilizzando un prefisso di classe che scegli, quindi « header » diventa .grid-header immediatamente. Un interruttore responsive aggiunge una media query max-width che comprime l'intero layout in una singola colonna per schermi stretti, e un interruttore HTML aggiunge uno scheletro di markup corrispondente in modo da poter vedere la struttura insieme al CSS.
Se due celle con lo stesso nome non formano un rettangolo solido — una forma a L o un nome che salta una cella — la vera griglia CSS non può renderizzare correttamente quell'area, lo strumento lo contrassegna direttamente nell'output come commento di avviso invece di generare silenziosamente regole dall'aspetto non valido. I terminatori di linea da qualsiasi sistema operativo vengono gestiti allo stesso modo e il conteggio attivo sotto l'output traccia quante righe di layout, aree denominate e caratteri il CSS generato contiene.
Tutto viene eseguito localmente nel tuo browser; il layout che disegni e il CSS che recuperi non vengono mai inviati da nessuna parte. Copia il risultato, scaricalo come file .txt o invia l'output direttamente in un altro strumento come il formattatore CSS per affinare ulteriormente il rientro.