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

Layout della griglia CSS a 3 colonne uguali

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 impostato su tre colonne di uguale larghezza in un'unica riga, con le aree con nome disattivate: il layout è semplicemente ripeti(3, 1fr), il modo più breve per dire "tre colonne che dividono sempre equamente la larghezza disponibile".

Le colonne di uguale larghezza sono il cavallo di battaglia delle griglie delle carte, delle tabelle dei prezzi e delle gallerie di immagini: nessuna area ha bisogno di un nome perché ogni colonna svolge lo stesso ruolo, quindi il semplice dimensionamento delle tracce è più chiaro di quanto lo sarebbe una dichiarazione delle aree del modello di griglia. Aggiungi una riga e le stesse tre tracce si ripetono sotto, ancora perfettamente uniformi.

Aumenta il numero di colonne per una griglia più densa o attiva le aree con nome se una colonna successiva deve distinguersi dal resto: il CSS e l'HTML di seguito si aggiornano nel momento in cui lo fai. Tutto viene eseguito sul lato client, quindi non c'è nulla da caricare e nulla da attendere.

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