Migliori pratiche con il layout della griglia CSS

Una domanda sempre più comune, ora che le persone utilizzano CSS Grid Layout in produzione, sembra essere "Quali sono le migliori pratiche?" La risposta breve a questa domanda consiste nell'utilizzare il metodo di layout come definito nelle specifiche. Le parti particolari delle specifiche che scegli di utilizzare, e in effetti il ​​modo in cui combini Grid con altri metodi di layout come Flexbox, dipendono da ciò che funziona per i modelli che stai cercando di creare e da come tu e il tuo team volete lavorare.

Guardando più in profondità, penso che forse questa richiesta di "best practices" indichi forse una mancanza di fiducia nell'utilizzo di un metodo di layout molto diverso da quello precedente. Forse una preoccupazione che stiamo usando Grid per cose per cui non è stato progettato, o non usando Grid quando dovremmo. Forse dipende dalle preoccupazioni sul supporto dei browser più vecchi o su come Grid si inserisce nel nostro flusso di lavoro di sviluppo.

In questo articolo, cercherò di coprire alcune delle cose che potrebbero essere descritte come migliori pratiche e alcune cose di cui probabilmente non devi preoccuparti.

Il sondaggio

Per aiutare a informare questo articolo, volevo scoprire come altre persone stavano utilizzando Grid Layout in produzione, quali sono state le sfide che hanno dovuto affrontare, cosa gli è piaciuto davvero? C'erano domande, problemi o metodi comuni utilizzati. Per scoprirlo, ho messo insieme un rapido sondaggio, ponendo domande su come le persone utilizzavano Grid Layout e, in particolare, cosa gli piaceva di più e cosa trovavano difficile.

Nell'articolo che segue, farò riferimento e citerò direttamente alcune di queste risposte. Mi collegherò anche a molte altre risorse, dove puoi scoprire di più sulle tecniche descritte. Come si è scoperto, c'era molto più di un articolo degno di cose interessanti da spacchettare nelle risposte al sondaggio. Tratterò alcune delle altre cose che sono emerse in un prossimo post.

Accessibilità

Se c'è una parte della specifica Grid di cui devi fare attenzione durante l'utilizzo, è quando usi qualcosa che potrebbe causare il riordino dei contenuti:

“Gli autori devono utilizzare l'ordine e le proprietà di posizionamento della griglia solo per il riordino visivo, non logico, del contenuto. I fogli di stile che utilizzano queste funzionalità per eseguire il riordino logico non sono conformi".

— Specifica della griglia: riordino e accessibilità

Questo non è esclusivo di Grid, tuttavia, la capacità di riorganizzare i contenuti così facilmente in due dimensioni lo rende un problema più grande per Grid. Tuttavia, se si utilizza un metodo che consente il riordino dei contenuti, sia esso Grid, Flexbox o persino il posizionamento assoluto, è necessario fare attenzione a non disconnettere l'esperienza visiva da come è strutturato il contenuto nel documento. Le utilità per la lettura dello schermo (e le persone che navigano nel documento utilizzando solo una tastiera) seguiranno l'ordine degli elementi nel codice sorgente.

I punti in cui è necessario prestare particolare attenzione sono quando si utilizza flex-direction per invertire l'ordine in Flexbox; la proprietà order in Flexbox o Grid; qualsiasi posizionamento di elementi Griglia utilizzando qualsiasi metodo, se sposta gli elementi fuori dall'ordine logico nel documento; e utilizzando la modalità di imballaggio denso di grid-auto-flow .

Per ulteriori informazioni su questo problema, vedere le seguenti risorse:

• Layout della griglia e accessibilità - MDN
• Flexbox e la navigazione da tastiera si disconnettono

Quali metodi di layout della griglia dovrei usare?

"Con così tanta scelta in Grid, è stata una sfida attenersi a un modo coerente di scriverlo (ad es. denominare le linee della griglia o meno, definire le aree dei modelli di griglia, i fallback, le query multimediali) in modo che fosse gestibile dall'intero squadra."

— Michelle Barker

Quando dai un'occhiata per la prima volta a Grid, potrebbe sembrare travolgente con così tanti modi diversi di creare un layout. Alla fine, tuttavia, tutto si riduce al posizionamento delle cose da una riga all'altra della griglia. Puoi scegliere in base al layout che stai cercando di ottenere, oltre a ciò che funziona bene per il tuo team e il sito che stai costruendo.

Non esiste un modo giusto o sbagliato. Di seguito, riprenderò alcuni dei temi comuni di confusione. Ho anche già trattato molte altre potenziali aree di confusione in un precedente articolo "Grid Gotchas and Stumbling Blocks".

Dovrei usare una griglia implicita o esplicita?

La griglia definita con grid-template-columns e grid-template-rows è nota come griglia esplicita. La griglia esplicita abilita la denominazione delle linee sulla griglia e ti dà anche la possibilità di indirizzare la riga finale della griglia con -1 . Sceglierai una griglia esplicita per fare una di queste cose e in generale quando avrai un layout tutto progettato e saprai esattamente dove dovrebbero andare le linee della griglia e la dimensione delle tracce.

Uso la griglia implicita più spesso per le tracce di riga. Voglio definire le colonne, ma le righe verranno ridimensionate automaticamente e cresceranno per contenere il contenuto. Puoi controllare la griglia implicita in una certa misura con grid-auto-columns e grid-auto-rows , tuttavia, hai meno controllo rispetto a quando definisci tutto.

Devi decidere se sai esattamente quanto contenuto hai e quindi il numero di righe e colonne, nel qual caso puoi creare una griglia esplicita. Se non sai quanto contenuto hai, ma vuoi semplicemente creare righe o colonne per contenere tutto ciò che c'è, utilizzerai la griglia implicita.

Tuttavia, è possibile combinare i due. Nel CSS sottostante, ho definito tre colonne nella griglia esplicita e tre righe, quindi le prime tre righe di contenuto saranno le seguenti:

• Una traccia di almeno 200 px di altezza, ma che si espande per portare i contenuti più alti,
• Una pista fissata a 400px di altezza,
• Una traccia di almeno 300px di altezza (ma si espande).

Qualsiasi altro contenuto andrà in una riga creata nella griglia implicita e sto usando la proprietà grid-auto-rows per rendere quelle tracce alte almeno 300 px, espandendole in auto .

 .grid { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: minmax(200px auto) 400px minmax(300px, auto); grid-auto-rows: minmax(300px, auto); grid-gap: 20px; }

Una griglia flessibile con un numero flessibile di colonne

Usando la notazione ripetuta, il riempimento automatico e minmax è possibile creare un pattern di tutte le tracce che si adattano a un contenitore, eliminando così in una certa misura la necessità di Media Query. Questa tecnica può essere trovata in questo tutorial video e anche dimostrata insieme a idee simili nel mio recente articolo "Utilizzo delle query multimediali per un design reattivo nel 2018".

Scegli questa tecnica quando sei felice che il contenuto scenda al di sotto del contenuto precedente quando c'è meno spazio e sei felice di consentire molta flessibilità nel dimensionamento. Hai chiesto espressamente che le tue colonne vengano visualizzate con una dimensione minima e che si riempiano automaticamente .

Ci sono stati alcuni commenti nel sondaggio che mi hanno fatto chiedere se le persone stessero scegliendo questo metodo quando volevano davvero una griglia con un numero fisso di colonne. Se ti ritrovi con un numero imprevedibile di colonne in determinati punti di interruzione, potrebbe essere meglio impostare il numero di colonne e ridefinirlo con query multimediali secondo necessità, piuttosto che utilizzare auto-fill auto-fit .

Quale metodo di dimensionamento delle tracce dovrei usare?

Ho descritto in dettaglio il dimensionamento delle tracce nel mio articolo "Quanto è grande quella scatola? Capire il dimensionamento nel layout della griglia", tuttavia, ricevo spesso domande su quale metodo di ridimensionamento delle tracce utilizzare. In particolare, mi viene chiesto della differenza tra il dimensionamento percentuale e l'unità fr .

Se usi semplicemente l'unità fr come specificato, differisce dall'utilizzo di una percentuale perché distribuisce lo spazio disponibile. Se metti un elemento più grande in una traccia, il modo in cui funzionerà fr fino è consentire a quella traccia di occupare più spazio e distribuire ciò che è rimasto.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } 

Per fare in modo che l'unità fr distribuisca tutto lo spazio nel contenitore della griglia è necessario assegnargli una dimensione minima di 0 usando minmax() .

 .grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-gap: 20px; }

Quindi puoi scegliere di usare fr in uno di questi scenari: quelli in cui vuoi la distribuzione dello spazio da una base di auto (il comportamento predefinito) e quelli in cui vuoi una distribuzione uguale. In genere userei l'unità fr poiché poi risolve il dimensionamento per te e consente l'uso di tracce o spazi vuoti a larghezza fissa. L'unica volta che utilizzo invece una percentuale è quando aggiungo componenti della griglia a un layout esistente che utilizza anche altri metodi di layout. Se voglio che i miei componenti della griglia si allineino con un layout basato su float o flex che utilizza le percentuali, usarli nel mio layout di griglia significa che tutto utilizza lo stesso metodo di dimensionamento.

Posizionare automaticamente gli oggetti o impostarne la posizione?

Scoprirai spesso che devi solo posizionare uno o due elementi nel layout e il resto va a posto in base all'ordine dei contenuti. In effetti, questo è davvero un buon test per non aver disconnesso la sorgente e il display visivo. Se le cose scendono praticamente in posizione in base al posizionamento automatico, probabilmente sono in un buon ordine.

Una volta che ho deciso dove andare a finire, tuttavia, tendo ad assegnare una posizione a tutto. Ciò significa che non mi capita che accadano cose strane se qualcuno aggiunge qualcosa al documento e la griglia lo posiziona automaticamente in un posto imprevisto, eliminando così il layout. Se tutto è posizionato, Griglia inserirà quell'elemento nella successiva cella della griglia vuota disponibile. Potrebbe non essere esattamente dove lo vuoi, ma sederti alla fine del tuo layout è probabilmente meglio che saltare nel mezzo e spingere altre cose in giro.

Quale metodo di posizionamento utilizzare?

Quando si lavora con Grid Layout, tutto si riduce al posizionamento degli elementi da una riga all'altra. Tutto il resto è essenzialmente un aiuto per questo.

Decidi con il tuo team se desideri assegnare un nome alle linee, utilizzare le aree dei modelli di griglia o se intendi utilizzare una combinazione di diversi tipi di layout. Trovo che mi piace usare le aree dei modelli di griglia in particolare per i piccoli componenti. Tuttavia, non c'è giusto o sbagliato. Scopri cosa è meglio per te.

Griglia in combinazione con altri meccanismi di layout

Ricorda che Grid Layout non è l'unico vero metodo di layout per dominarli tutti, è progettato per un certo tipo di layout, ovvero il layout bidimensionale. Esistono ancora altri metodi di layout e dovresti considerare ogni modello e ciò che si adatta meglio.

Penso che in realtà sia piuttosto difficile per quelli di noi abituati a smanettare con i metodi di layout per fargli fare qualcosa per cui non sono stati davvero progettati. È davvero un buon momento per fare un passo indietro, guardare i metodi di layout per le attività per cui sono stati progettati e ricordarsi di usarli per tali attività.

In particolare, non importa quante volte scrivo di Grid rispetto a Flexbox, mi verrà chiesto quale persona dovrebbe usare. Ci sono molti modelli in cui entrambi i metodi di layout hanno perfettamente senso e dipende davvero da te. Nessuno ti griderà per aver selezionato Flexbox su Griglia o Griglia su Flexbox.

Nel mio lavoro, tendo a utilizzare Flexbox per i componenti in cui voglio che la dimensione naturale degli elementi controlli fortemente il loro layout, essenzialmente spingendo gli altri elementi in giro. Uso spesso Flexbox anche perché voglio l'allineamento, dato che le proprietà Allineamento riquadro sono disponibili solo per l'uso in Flexbox e Griglia. Potrei avere un contenitore Flex con un elemento figlio, in modo da poter allineare quel figlio.

Un segno che forse Flexbox non è il metodo di layout che dovrei scegliere è quando inizio ad aggiungere larghezze percentuali agli elementi flessibili e impostare flex-grow su 0. Il motivo per aggiungere larghezze percentuali agli elementi flessibili è spesso perché sto cercando di allineare in due dimensioni (allineare le cose in due dimensioni è esattamente a cosa serve Grid). Tuttavia, prova entrambi e vedi quale sembra adattarsi meglio al contenuto o al modello di progettazione. È improbabile che in questo modo tu possa causare problemi.

Griglia di nidificazione e elementi flessibili

Anche questo viene fuori molto e non c'è assolutamente alcun problema nel rendere un elemento della griglia anche un contenitore della griglia, nidificando così una griglia all'interno di un'altra. Puoi fare lo stesso con Flexbox, creando un Flex Item e un Flex Container. Puoi anche trasformare un elemento della griglia e un contenitore flessibile o un elemento flessibile in un contenitore della griglia: nessuna di queste cose è un problema!

Quello che non possiamo fare attualmente è nidificare una griglia dentro un'altra e fare in modo che la griglia nidificata utilizzi le tracce della griglia definite sul genitore generale. Ciò sarebbe molto utile ed è ciò che sperano di risolvere le proposte di sottogriglia nel livello 2 della specifica della griglia. Una griglia nidificata attualmente diventa una nuova griglia, quindi dovresti prestare attenzione al dimensionamento per assicurarti che si allinei con le tracce principali.

Puoi avere molte griglie su una pagina

Un commento è apparso alcune volte nel sondaggio che mi ha sorpreso, sembra esserci l'idea che una griglia dovrebbe essere confinata al layout principale e che molte griglie su una pagina forse non fossero una buona cosa. Puoi avere tutte le griglie che vuoi! Usa la griglia per cose grandi e piccole, se ha senso disposta come una griglia, usa Griglia.

Fallback e supporto dei browser meno recenti

“La griglia utilizzata insieme a @supports ci ha consentito di controllare meglio il numero di variazioni di layout che possiamo aspettarci di vedere. Ha anche funzionato molto bene con il nostro approccio di miglioramento progressivo, il che significa che possiamo premiare coloro che dispongono di browser moderni senza impedire l'accesso ai contenuti a coloro che non utilizzano la tecnologia più recente".

— Joe Lambert al lavoro su rareloop.com

Nel sondaggio, molte persone hanno menzionato i browser più vecchi, tuttavia, c'era una divisione ragionevolmente uguale tra coloro che ritenevano che supportare i browser più vecchi fosse difficile e coloro che ritenevano che fosse facile a causa delle query sulle funzionalità e del fatto che Grid sovrascrive altri metodi di layout. Ho scritto a lungo sui meccanismi di creazione di questi fallback in "Utilizzo della griglia CSS: supporto di browser senza griglia".

In generale, i browser moderni sono molto più interoperabili rispetto alle loro controparti precedenti. Tendiamo a vedere molti meno "bug del browser" effettivi e se usi correttamente HTML e CSS, generalmente scoprirai che ciò che vedi in un browser è lo stesso di un altro.

Naturalmente, abbiamo situazioni in cui un browser non ha ancora fornito il supporto per una determinata specifica o alcune parti di una specifica. Con Grid, siamo stati molto fortunati in quanto i browser hanno distribuito Grid Layout in un modo molto completo e interoperabile in breve tempo l'uno dall'altro. Pertanto, le nostre considerazioni per i test tendono a essere necessarie per testare i browser con Grid e senza Grid. Potresti anche aver scelto di utilizzare la versione con prefisso -ms in IE10 e IE11, che richiederebbe quindi il test come terzo tipo di browser.

I browser che supportano il layout moderno della griglia (non la versione IE) supportano anche le query di funzionalità. Ciò significa che puoi testare il supporto Grid prima di usarlo.

Test di browser che non supportano la griglia

Quando si utilizzano fallback per browser senza supporto per Grid Layout (o si utilizza la versione con prefisso -ms per IE10 e 11), si vorrà testare il modo in cui quei browser eseguono il rendering di Grid Layout. Per fare ciò, hai bisogno di un modo per visualizzare il tuo sito in un browser di esempio.

Non prenderei l'approccio di interrompere la tua Feature Query controllando il supporto di qualcosa di senza senso o digitando erroneamente la grid dei valori. Questo approccio funzionerà solo se il tuo foglio di stile è incredibilmente semplice e hai messo assolutamente tutto a che fare con il layout della griglia all'interno delle query di funzionalità. Questo è un modo di lavorare molto fragile e dispendioso in termini di tempo, soprattutto se si utilizza ampiamente Grid. Inoltre, un browser più vecchio non solo mancherà del supporto per Grid Layout, ma ci saranno anche altre proprietà CSS non supportate. Se stai cercando le "migliori pratiche", allora prepararti in modo da essere in una buona posizione per testare il tuo lavoro è lassù!

Ci sono un paio di modi semplici per impostare te stesso con un metodo adeguato per testare i tuoi fallback. Il metodo più semplice, se disponi di una connessione Internet ragionevolmente veloce e non ti dispiace pagare una quota di abbonamento, è utilizzare un servizio come BrowserStack. Si tratta di un servizio che permette di visualizzare i siti web (anche quelli in sviluppo sul proprio computer) su tutta una serie di browser reali. BrowserStack offre account gratuiti per progetti open source.

Per testare localmente, il mio suggerimento sarebbe quello di utilizzare una macchina virtuale con il browser di destinazione installato. Microsoft offre download gratuiti di macchine virtuali con versioni di IE fino a IE8 e anche Edge. Puoi anche installare sulla macchina virtuale una versione precedente di un browser senza alcun supporto Grid. Ad esempio ottenendo una copia di Firefox 51 o inferiore. Dopo aver installato il tuo vecchio Firefox, assicurati di disattivare gli aggiornamenti automatici come spiegato qui, altrimenti si aggiornerà automaticamente!

Puoi quindi testare il tuo sito in IE11 e in Firefox che non supporta Firefox su una VM (una soluzione molto meno fragile rispetto ai valori di errore di ortografia). La configurazione potrebbe richiedere circa un'ora, ma poi sarai davvero in un buon posto per testare i tuoi fallback.

Disimparare vecchie abitudini

“Era la prima volta che usavo Grid Layout, quindi c'erano molti concetti da imparare e proprietà da capire. Concettualmente, ho trovato la cosa più difficile disimparare tutte le cose che avevo fatto per anni, come pulire i galleggianti e imballare tutto in contenitori div. "

— Nascosto che lavora su hiddedevries.nl/en

Molte delle persone che hanno risposto al sondaggio hanno menzionato la necessità di disimparare vecchie abitudini e come l'apprendimento del layout sarebbe più facile per le persone completamente nuove ai CSS. Tendo ad essere d'accordo. Quando si insegna alle persone di persona, i principianti assoluti hanno pochi problemi nell'usare Grid, mentre gli sviluppatori esperti si sforzano di riportare la griglia a un metodo di layout unidimensionale. Ho visto tentativi di "sistemi a griglia" utilizzando CSS Grid che aggiungono i wrapper di riga necessari per una griglia float o flex.

Non aver paura di provare nuove tecniche . Se hai la possibilità di eseguire test in alcuni browser e rimani consapevole dei potenziali problemi di accessibilità, non puoi davvero sbagliare. E, se trovi un ottimo modo per creare un determinato modello, fallo sapere a tutti gli altri. Siamo tutti nuovi nell'utilizzo di Grid in produzione, quindi c'è sicuramente molto da scoprire e condividere.

“Grid Layout è lo sviluppo CSS più eccitante dai media query. È stato così ben pensato per le esigenze degli sviluppatori del mondo reale ed è un'assoluta gioia da usare nella produzione, sia per i designer che per gli sviluppatori".

— Trys Mudford lavora su trysmudford.com

Per concludere, ecco un brevissimo elenco delle migliori pratiche attuali! Se hai scoperto cose che funzionano o non funzionano bene nella tua situazione, aggiungile ai commenti.

1. Sii molto consapevole della possibilità di riordinare i contenuti. Verificare di non aver scollegato la visualizzazione visiva dall'ordine del documento.
2. Testare utilizzando browser di destinazione reali con una macchina virtuale locale o remota.
3. Non dimenticare che i metodi di layout precedenti sono ancora validi e utili. Prova diversi modi per ottenere schemi. Non essere bloccato nel dover usare Grid.
4. Sappi che come sviluppatore front-end esperto è probabile che tu abbia tutta una serie di preconcetti su come funziona il layout. Prova a guardare di nuovo a questi nuovi metodi piuttosto che forzarli a tornare ai vecchi schemi.
5. Continua a provare le cose. Siamo tutti nuovi a questo. Metti alla prova il tuo lavoro e condividi ciò che scopri.