⭐ 0
🔍
Testo Immagine PDF e Documenti Audio Musica Elettronica Tempo Utilità Validatori Esoterismo Giochi

Layout della griglia CSS del Santo Graal: codice pronto

Progetta visivamente i layout della griglia CSS: imposta colonne, righe e spazi vuoti, quindi digita i nomi delle aree nelle celle per creare aree del modello di griglia, con un'anteprima dal vivo e CSS e HTML copiabili.

Digita un nome in qualsiasi cella sottostante; le celle con lo stesso nome si uniscono in un'unica regione delle aree del modello di griglia.

Elaborazione... 0%

Risultato

Questa pagina apre il generatore di griglia precaricato con il layout del Santo Graal: tre colonne e tre righe, con intestazione e piè di pagina che coprono l'intera larghezza e una riga nav/principale/laterale in mezzo. La riga di intestazione utilizza l'altezza automatica, la riga centrale riempie lo spazio rimanente e le due colonne laterali sono fisse a 200 px mentre la colonna principale occupa il resto.

Il layout del Santo Graal ha guadagnato il suo nome perché era davvero difficile da costruire in modo affidabile prima di CSS Grid: anni di hack flottanti, layout di tabelle e posizionamento assoluto hanno cercato di simulare questa forma esatta. Con le aree del modello a griglia si riduce a cinque regioni con nome e una manciata di dimensioni di traccia, motivo per cui rimane il primo esempio standard per insegnare la griglia CSS.

Ogni numero e spazio vuoto in questa pagina è ancora attivo: riduci le colonne laterali, aggiungi una quarta riga o rinomina un'area e l'anteprima e il CSS copiabile si aggiornano immediatamente. Copia i blocchi CSS e HTML direttamente nel tuo progetto: tutto viene eseguito localmente nel tuo browser, nulla viene caricato.

🛡️
Eseguito nel browser

I tuoi file e input non lasciano mai questo dispositivo. L'elaborazione viene eseguita completamente offline. Sicuro al 100%.

Formati e regole accettati

  • Inserimento numerico per 1-6 colonne e righe, oltre a controlli separati per lo spazio tra colonne e righe che si combinano in un unico valore di spazio quando corrispondono.
  • Una modalità con aree con nome: digita il nome di un'area direttamente in qualsiasi cella della griglia live; lo strumento crea una stringa valida delle aree del modello di griglia e avvisa quando i nomi non formano rettangoli puliti.
  • Blocco CSS copiabile (visualizzazione: griglia, colonne/righe del modello di griglia, spazio, aree del modello di griglia) più uno scheletro HTML corrispondente con un div dell'area della griglia per regione denominata.

Vantaggi principali

✓ Digita un nome direttamente in qualsiasi cella e i nomi corrispondenti si uniscono in un'unica regione delle aree del modello della griglia: senza trascinare la selezione, senza indovinare manualmente la sintassi delle stringhe tra virgolette.
✓ La griglia di anteprima dal vivo si ridimensiona e ricolora a ogni modifica, così puoi vedere le tracce esatte di colonne e righe e ogni regione con nome prima di copiare una singola riga di CSS.
✓ Le preimpostazioni come il classico layout del Santo Graal e una barra laterale stretta ti offrono una dichiarazione di aree di modello di griglia reale e funzionante da cui iniziare invece di una griglia vuota.

Casi d'uso

  • • Costruisci la classica shell della pagina del Santo Graal - intestazione e piè di pagina a larghezza intera con una riga centrale di navigazione/principale/laterale - digitando i nomi delle aree invece di scrivere a mano le aree del modello di griglia.
  • • Disponi una pagina delle impostazioni o un dashboard di amministrazione con una barra laterale a larghezza fissa accanto a una colonna di contenuto flessibile e copia il CSS e l'HTML esatto una volta che l'anteprima dal vivo appare corretta.
  • • Verifica che un insieme di aree con nome formi effettivamente rettangoli validi prima della spedizione: lo strumento contrassegna i nomi esatti che potrebbero interrompere le aree del modello di griglia nel browser.