Per anni il mio istinto quando un progetto richiedeva un vero layout bidimensionale era quello di raggiungere una pila di contenitori flex annidati Una fila di carte all'interno di una colonna all'interno di un'altra riga, ognuna flettente, ognuna in lotta con le altre per lo spazio Funzionava, nel senso che i pixel alla fine atterravano dove volevo, ma non era mai lo strumento giusto, e ogni volta che dovevo cambiare il design pagavo la scorciatoia CSS Grid è stata costruita proprio per questo, e il giorno in cui ho smesso di evitarlo il mio codice di layout si è accorciato e il mio markup si è adulato.
La cosa che mi ha tenuto lontano dalla griglia per troppo tempo è stata la sintassi. grid-template-columns: repeat(3, minmax(0, 1fr)) non è una frase che rotola via dalle dita, e la relazione tra le tracce che dichiari e le caselle che appaiono non è ovvia fino a quando non l'hai vista accadere alcune decine di volte Quel divario tra & quot; So cosa voglio" e & quot; Conosco la proprietà che produce it" è esattamente ciò che chiude un generatore.
la Generatore di griglia CSS consente di impostare il numero di colonne e righe, scegliere una dimensione per ciascun asse, comporre gli spazi vuoti e regolare l'allineamento, il tutto mentre un'anteprima live si rifà davanti a te Il CSS esatto che produce ciò che vedi si trova in una casella pronta per la copia sottostante Trasforma la griglia da una specifica che devi memorizzare in un layout che crei facendo clic.
tl; dr: CSS Grid è un modello di layout bidimensionale che controlla righe e colonne contemporaneamente Il contenitore lo guida attraverso
grid-template-columns,grid-template-rows,gap, e i quattro giustificano e allineano le proprietà Questo generatore li espone tutti, mostra un'anteprima live ed emette CSS puliti che utilizzarepeat()E ilfrunità. Poiché l'anteprima viene eseguita con le stesse dichiarazioni emesse, ciò che vedi è esattamente ciò che incolli. Funziona interamente nel tuo browser senza registrazione.
Che problema risolve un generatore di rete CSS?
La difficoltà con CSS Grid non è che sia complicato È che è astratto Descrivi una struttura (& quot; tre colonne uguali con un pò di spazio tra loro") e il browser calcola la geometria Quell'indirezione è il punto intero, perché è ciò che rende le griglie reattive senza una singola media query Ma l'indirection è difficile da tenere in testa Non puoi guardare repeat(3, 1fr) e senti immediatamente il risultato nel modo in cui puoi guardare una griglia di caselle renderizzate.
Un generatore fa collassare il ciclo di scrittura-salvataggio-aggiornamento in un'unica interazione Si modifica il conteggio delle colonne e tre caselle diventano quattro Si passa una traccia da 1fr a auto e la colonna scatta alla larghezza del suo contenuto Alzi il divario e le caselle respirano Dopo dieci minuti di questo, l'unità frazione smette di essere un simbolo che traduci e diventa una cosa che raggiungi apposta E quando hai finito di esplorare, non ti rimane una nota da trascrivere, perché il CSS funzionante è già scritto per te nella casella di output.
C'è un secondo vantaggio, più silenzioso Costruire il layout mediante manipolazione costringe lo strumento a emettere solo CSS validi e ben formati Non è possibile produrre un guasto grid-template-columns value facendo clic, in modo che l'output sia sempre qualcosa che puoi incollare con sicurezza Tale affidabilità è la ragione per cui tengo un set di builder CSS visivi vicini anziché scrivere ogni regola da zero.
Quali proprietà controlla il contenitore a griglia?
CSS Grid, come flexbox, divide la responsabilità tra il contenitore e i suoi elementi Il contenitore definisce le tracce e la struttura complessiva, ed è lì che vive la maggior parte delle decisioni di layout, quindi è dove si concentra il generatore Ecco cosa fa ogni proprietà del contenitore.
| Proprietà | Cosa controlla | Valori comuni |
|---|---|---|
grid-template-columns |
Il numero e la dimensione delle colonne | repeat(3, 1fr), 200px 1fr, auto |
grid-template-rows |
Il numero e la dimensione delle righe | repeat(2, auto), 100px, 1fr |
gap |
Spazio tra le tracce | qualsiasi lunghezza, per esempio 16px oppure 20px 10px |
justify-items |
Posizione dell'elemento lungo l'asse della riga | stretch, start, center, end |
align-items |
Posizione dell'elemento lungo l'asse della colonna | stretch, start, center, end |
justify-content |
Posizione del binario quando la griglia è più stretta del suo contenitore, sull'asse della fila | start, center, space-between |
align-content |
Posizione del binario sull'asse della colonna | start, center, space-between |
Il modello mentale che fa questo bastone è la distinzione tra le tracce e gli oggetti. grid-template-columns e grid-template-rows definire i binari, che sono le corsie vuote della griglia Il divario si trova tra quelle corsie Il justify-items e align-items le proprietà posizionano quindi ogni elemento all'interno della cella che occupa, mentre justify-content e align-content posiziona l'intero set di tracce all'interno del contenitore quando c'è spazio libero Il generatore mantiene questi due livelli visivamente separati in modo da poter sentire la differenza tra lo spostamento di un elemento all'interno della sua cella e lo spostamento dell'intera griglia all'interno della pagina.
Cosa significa l'unità fr?
la fr unit è il pezzo di CSS Grid che paga per l'intero modello, e vale la pena capire piuttosto che copiare Uno fr rappresenta una frazione dello spazio libero nel contenitore della griglia dopo che sono state sottratte eventuali dimensioni e spazi fissi Se scrivi grid-template-columns: 1fr 1fr 1fril contenitore's larghezza disponibile è diviso in tre parti uguali Scrivere 2fr 1fr 1fr e la prima colonna occupa metà dello spazio mentre le altre due dividono il resto Il browser ricalcola quelle frazioni su ogni ridimensionamento, motivo per cui una griglia basata su frazioni è fluida senza punti di interruzione.
Questo è il comportamento che rende la griglia superiore alle percentuali per la maggior parte dei layout. Un insieme di 33.33% le colonne ignorano lo spazio vuoto e gli overflow, perché la somma delle percentuali più gli spazi vuoti ammonta a più del contenitore. Le unità di frazione vengono calcolate dopo che gli spazi sono stati eliminati, quindi repeat(3, 1fr) con un gap sempre si adatta Il generatore predefinito a 1fr colonne esattamente per questo motivo, e si può guardare tre colonne uguali tenere le loro proporzioni come si cambia il divario Se si desidera una colonna che abbraccia il suo contenuto, invece, passare a auto, min-content, o max-content e vedere subito la differenza.
Come faccio a fare un layout a tre colonne?
Questa è una delle cose più comuni che le persone costruiscono con la griglia e la ricetta è composta da due righe. Imposta il contenitore su display: grid e datelo grid-template-columns: repeat(3, 1fr). Che produce tre colonne uguali che fluiscono in tante righe quante ne servono per il contenuto Aggiungere un gap e hai un layout di carte.
Nel generatore, si imposta il conteggio delle colonne su tre, lasciare la dimensione su 1fr, e l'anteprima dispone una griglia di celle uguali La casella di output mostra
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}
Il motivo per cui vale la pena costruire facendo clic anziché digitando è che i layout reali non sono mai così puliti Vorrai che la barra laterale abbia una larghezza fissa e il contenuto si fletti, o che la prima riga sia più alta del resto Ognuna di queste modifiche è un controllo nel generatore e un valore modificato nell'output, e vedrai l'effetto prima di impegnarlo in un foglio di stile Se stai ancora decidendo tra griglia e un approccio basato su flex per un particolare blocco, il generatore flexbox è lo strumento complementare e il confronto più avanti in questa guida spiega quando ognuno vince.
Quando devo usare grid over flexbox?
Questa è la domanda che conta di più una volta che si conoscono entrambi i modelli, e la risposta onesta è che dipende dal numero di dimensioni del layout Flexbox è unidimensionale Dispone gli elementi lungo un singolo asse, una riga o una colonna, e li avvolge se si chiede La griglia è bidimensionale Controlla righe e colonne insieme, quindi un elemento può essere posizionato sia dalla sua riga che dalla sua colonna contemporaneamente.
La regola pratica che uso è questa Se sto disponendo un insieme di cose in una linea, una barra di navigazione, una fila di tag, una barra degli strumenti, una pila di campi di modulo, cioè flexbox Se sto disponendo una struttura con entrambe le righe e colonne che devono allinearsi l'una all'altra, una shell di pagina con un'intestazione, una barra laterale e un'area di contenuto, o una galleria in cui ogni carta si trova su una linea di griglia pulita, cioè griglia I due non sono rivali; una cella di griglia spesso contiene un contenitore flessibile e un elemento flessibile è spesso una piccola griglia Ecco la suddivisione come tabella.
| Domanda | Flexbox | Griglia CSS |
|---|---|---|
| dimensioni | Un asse alla volta | Righe e colonne insieme |
| Meglio per | Barre degli strumenti, nav, righe di elementi, tag di avvolgimento | Layout di pagina, gallerie, dashboard, moduli |
| Dimensionamento guidato da | Contenuto, poi distribuzione | Il modello di traccia che dichiari |
| Allineamento | justify-content, align-items |
Stesso più justify-items, align-content |
| Uso tipico | All'interno di una cella a griglia | La pagina complessiva o il frame della sezione |
Il generatore rende questo concreto perché puoi costruire lo stesso risultato visivo in entrambi i modi e vedere quale produce la regola più pulita Per una galleria di carte uguali, griglia con repeat() è due linee e flex è un contenitore di avvolgimento con larghezze su ogni bambino Per una singola fila che ha bisogno di allargare i suoi articoli ai bordi, flex con space-between è il percorso più breve.
Qual è la differenza tra gap, justify-content e allinea-contenuto?
Questi tre spesso si confondono perché tutti si occupano di spazio, ma operano a livelli diversi Il gap la proprietà imposta la spaziatura fissa tra le tracce ed è quella che utilizzerai in quasi tutte le griglie Un singolo valore spazia righe e colonne in modo uguale; due valori impostano separatamente il gap di riga e il gap di colonna, nella riga dell'ordine quindi nella colonna Il generatore consente di impostare i due gap in modo indipendente ed emette la scorciatoia solo quando differiscono, quindi l'output rimane breve quanto la situazione lo consente.
justify-content e align-content(, al contrario, fare qualsiasi cosa solo quando le tracce grid' s sono più piccole del contenitore, lasciando spazio libero per distribuire Se le tue colonne sono tutte larghezze di pixel fisse e non riempiono il contenitore, justify-content: center centrerà l'intero blocco di binari e space-between li spingerà ai bordi. Con fr colonne che già riempiono la larghezza, queste proprietà non hanno nulla da distribuire e sembrano non fare nulla, il che è una comune fonte di confusione Il generatore le omette dall'output quando vengono lasciate all'impostazione predefinita start, quindi ogni riga nella regola copiata è quella che ha un effetto visibile Quell'abitudine di emettere solo dichiarazioni significative è la stessa su cui mi affido nel generatore gradiente E il generatore box-shadow, perché una regola piena di linee no-op è una regola di cui non puoi fidarti a colpo d'occhio.
Come fa il generatore a mantenere onesta l'anteprima?
La trappola con qualsiasi costruttore visivo è che l'anteprima e il codice esportato possono andare alla deriva a parte Uno strumento che rende la sua anteprima in un modo e genera il suo codice in un altro modo è peggio che inutile, perché ti insegna un layout che non si riprodurrà Questo generatore evita che costruendo sia l'anteprima che il CSS copiato da un unico elenco di dichiarazioni La stessa funzione che decide quali proprietà emettere è quella che stilizza le caselle di anteprima, quindi quello che vedi è esattamente quello che incolli Non esiste un percorso di rendering separato che potrebbe non essere d'accordo.
Questa scelta di progettazione è il motivo per cui l'output viene utilizzato repeat() per qualsiasi asse con più di una traccia Una singola traccia viene emessa come dimensione nuda, ma due o più collassano in repeat(n, size), che è sia ciò che un essere umano scriverebbe sia ciò che mantiene la regola leggibile man mano che il conteggio cresce. È una piccola cosa, ma è la differenza tra l'output che spedireste e l'output che riscrivereste.
Costruire una griglia di carte reattiva, passo dopo passo
Ecco un flusso di lavoro che uso spesso Inizia con il conteggio delle colonne a tre e la dimensione su 1fr. Ora hai tre colonne uguali e fluide Imposta la dimensione della riga su auto così ogni riga cresce per adattarsi alla sua carta più alta Aumenta il divario verso qualcosa di comodo, una ventina di pixel per le carte, Si tratta di una griglia di carte completa e reattiva, e l'output è di quattro linee.
Per farlo avvolgere da solo senza query multimediali, il passo successivo in un progetto reale è lo scambio repeat(3, 1fr) per repeat(auto-fill, minmax(240px, 1fr)), che dice al browser di adattare quante più colonne minime da 240 pixel può e di estenderle per riempirle Il generatore ti dà il punto di partenza a conteggio fisso; che una modifica lo trasforma in una griglia autoavvolgente Comprendere il punto di partenza è ciò che rende ovvia la modifica, e questo è l'intero argomento per imparare il layout costruendolo anziché incollarlo Il caso più ampio per assemblare un insieme di strumenti che funzionano in questo modo è nel pezzo sul pezzo Toolkit per sviluppatori web, e le abitudini del flusso di lavoro che ne stanno dietro sono nel Strumenti di produttività per sviluppatori guida.
Quali browser supportano CSS Grid?
CSS Grid è supportato in ogni browser attuale e lo è da anni Le proprietà che questo generatore emette sono standard e non prefissate, quindi l'output funziona in Chrome, Firefox, Safari ed Edge senza prefissi o fallback del fornitore per qualsiasi browser a cui un progetto prende di mira realisticamente oggi gap anche la proprietà nei contenitori a griglia, che è stato l'ultimo pezzo ad atterrare ampiamente, è universalmente supportata ora Ciò significa che il CSS che copi è pronto per la produzione come scritto, il che non era sempre vero nei primi anni della griglia ed è una delle ragioni per cui il modello è finalmente la scelta predefinita piuttosto che un miglioramento progressivo Per le regole sottostanti, la specifica CSS Grid Layout Module Level 1 del W3C è la fonte primaria, e vale la pena leggerla una volta che il generatore ti ha dato l'intuizione di seguirla.
Se stai costruendo un toolkit visivo più ampio insieme a questo, il generatore border-radius e Generatore di morsetti CSS arrotonda il set, e il Guida agli strumenti di codifica raccoglie quelli che raggiungo di più.
Domande frequenti
Che cosa è un generatore di griglia CSS?
Un generatore di griglia CSS è uno strumento visivo che crea il codice di layout della griglia CSS dalle impostazioni scelte Scegli colonne, righe, dimensioni delle tracce, intervalli e allineamento e restituisce il CSS del modello di griglia insieme a un'anteprima live del risultato.
Cosa significa l'unità fr in CSS Grid?
L'unità fr rappresenta una frazione dello spazio libero nel contenitore della griglia Griglia-template-colonne: repeat (3, 1fr) crea tre colonne che prendono ciascuna una quota uguale della larghezza disponibile e rifluiscono man mano che il contenitore si ridimensiona.
Qual è la differenza tra CSS Grid e flexbox?
CSS Grid è un modello bidimensionale che controlla righe e colonne insieme, ideale per layout di pagina e griglie di schede Flexbox è unidimensionale, che posa elementi lungo un unico asse, ideale per barre degli strumenti e righe Sono complementari e spesso utilizzati insieme.
Come faccio a fare una griglia reattiva?
Usa le unità fr in modo che le tracce condividano la larghezza disponibile e combini repeat () con minmax () e auto-fill o auto-fit per griglie che si avvolgono da sole Questo generatore emette repeat () con le tracce fr come punto di partenza che puoi estendere.
Qual è la proprietà gap in CSS Grid?
gap imposta la spaziatura tra le tracce della griglia Un singolo valore spazia equamente sia le righe che le colonne; due valori impostano separatamente il gap di riga e il gap di colonna, nel gap di riga dell'ordine e poi nel gap di colonna.
Il CSS di rete generato è sicuro da usare in produzione?
Sì. CSS Grid è supportato in ogni browser moderno e lo strumento emette proprietà standard e non fissate Tutta l'elaborazione avviene nel browser, quindi non viene caricato nulla e lo strumento funziona offline una volta caricato.
Il generatore di griglia CSS funziona su dispositivi mobili?
Sì. Lo strumento è completamente reattivo e funziona in qualsiasi browser moderno su telefoni, tablet e desktop Il CSS generato è identico indipendentemente dal dispositivo su cui lo si costruisce.
Questo generatore di griglia CSS è gratuito?
Sì. è completamente gratuito senza iscrizione, senza filigrane e senza limiti di utilizzo. Il CSS della griglia che produce è tuo da utilizzare in qualsiasi progetto.
