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

Barra laterale + layout griglia CSS dei contenuti

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 con un layout a due colonne e una riga già denominato: una colonna della barra laterale da 200 px accanto a una colonna di contenuto flessibile che occupa lo spazio rimanente. Entrambe le aree sono immediatamente visibili nell'anteprima live, colorate ed etichettate in modo che la divisione sia evidente a colpo d'occhio.

Questa è la forma di navigazione più contenuto più comune sul Web: le pagine delle impostazioni, i siti di documentazione e i dashboard di amministrazione si appoggiano tutti su un binario a larghezza fissa accanto a un'area principale fluida. Poiché la colonna della barra laterale utilizza un valore in pixel e la colonna del contenuto utilizza 1fr, la barra laterale mantiene una larghezza costante mentre la colonna del contenuto assorbe ogni pixel extra del viewport.

Rinomina un'area, modifica la larghezza della colonna o aggiungi più righe per un'intestazione sopra la divisione: l'output CSS e HTML di seguito tiene traccia di ogni modifica in tempo reale. Lo strumento è gratuito e continua a funzionare interamente nel tuo browser, senza caricamento e senza account.

🛡️
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.