11 cose che ho imparato leggendo le specifiche della griglia CSS

Illustrazione di Alex Kunchevsky

11 giugno 2017, ho deciso di leggere le specifiche della griglia CSS.

La specifica era un po 'tecnica, ma era di gran lunga la specifica più apprezzata che avessi mai letto. Se sei uno sviluppatore più avanzato, aggiungilo ai riferimenti per riferimenti futuri.

Quindi, sarà utile?

Credo che la differenza tra ingegneri bravi e bravi sia che questi ultimi si prendono il loro tempo per capire cosa succede davvero sotto il cofano. Imparano come funzionano le cose, invece di imparare con "copia e incolla".

Quindi, vuoi essere un grande sviluppatore?

Diavolo, si. Oppure non leggere questo articolo.

Cosa imparerai

Durante la lettura della specifica, ho imparato alcuni dettagli molto sottili, ma profondi.

In questo articolo, li condividerò con te.

1. La griglia CSS è dichiarativa

Le API dichiarative sono così dolci con cui lavorare. Pensi ReactJS?

Man mano che i siti Web si evolvono da semplici documenti in applicazioni complesse e interattive, i layout Web diventano difficili da comporre. Così difficili, sono stati il ​​mio incubo.

Questo è esattamente il problema che CSS Grid ha risolto oggi.

Dalle specifiche.

La griglia CSS elimina il doloroso processo di creazione di layout intelligenti e lo sostituisce con un bellissimo set di regole dichiarative che rendono il processo quasi senza sforzo.

Questi sono bei tempi nella storia dei CSS.

2. L'unità frazionaria non produce sempre righe e colonne equidistanti

Una delle prime cose che tutti imparano e si innamorano della griglia CSS è l'unità frazionaria. Anche un'anatra può cavarsela.

L'unità frazionaria elimina il dolore del calcolo delle percentuali. È un piacere lavorare con.

Molte persone insegnano che l'unità frazionaria (fr) produce colonne o file equidistanti.

Ad esempio, una dichiarazione come 1fr 1fr 1fr dovrebbe fornire colonne o righe di uguale spaziatura. Vedi l'illustrazione seguente:

Colonne equidistanti create dall'unità frazionaria.

Purtroppo, questo NON è sempre vero. Povera anatra.

Quanto segue è dalle specifiche:

L'unità fr riempie lo spazio disponibile MA NON è MAI più piccola della dimensione minima del contenitore della griglia o del contenuto della riga o della colonna.

In sostanza, se si dispone di un'immagine, img o qualsiasi elemento della griglia, con una dichiarazione di larghezza minima o altezza minima, è possibile ottenere risultati imprevisti con l'unità frazionaria.

Dopo aver ciarlato in giro come un'anatra spaventata bagnata, ho trascorso molto tempo a sperimentare l'unità frazionaria. Ho scritto un articolo sui miei risultati.

3. Non sai davvero come sono dimensionate le griglie. O tu?

Una definizione di griglia CSS inizia sempre nelle righe di questo:

display: griglia

Spesso, è seguito dalle definizioni di riga e colonna. Qualcosa come questo:

righe-griglia-modello: 10px 1fr 3fr
grid-template-colonne: 1fr

E infine, è probabile che posizioniate gli elementi della griglia con qualsiasi tecnica vi si adatti.

Dal momento che ci sono molti modi per posizionare gli elementi della griglia, per brevità salterò il codice richiesto.

Quindi, ecco il problema.

Sotto il cofano, devi presumere che le dimensioni delle righe e delle colonne della griglia vengano calcolate prima di posizionare gli elementi. Destra?

Bene, sembra che la verità sia l'esatto contrario.

Che strano.

Quanto segue è dalle specifiche:

2.3. Dimensionamento della griglia
Una volta posizionati gli elementi della griglia, vengono calcolate le dimensioni delle tracce della griglia (righe e colonne), tenendo conto delle dimensioni del loro contenuto e / o dello spazio disponibile come specificato nella definizione della griglia.

Nota la progressione.

  1. Gli elementi della griglia vengono posizionati.
  2. Vengono calcolate le dimensioni delle tracce della griglia

È probabile che tu abbia domande in merito. Quindi, proverò a risolvere quelle tue preoccupazioni.

Innanzitutto, si noti che a ciascun elemento della griglia viene assegnata un'area della griglia. Gli elementi della griglia vengono quindi dimensionati all'interno di quest'area. Quindi, come vengono posizionati esattamente gli elementi della griglia senza già calcolare la dimensione delle tracce?

Se dai un'occhiata alla sezione Posizionamento di elementi griglia della specifica, troverai un indizio.

Molto viene preso in considerazione quando si dimensionano le griglie e ciò include in gran parte la dimensione degli elementi della griglia.

Le griglie di dimensionamento possono essere basate su quanto segue:

  • Una funzione di dimensionamento fissa (lunghezza o percentuale risolvibile).
  • Una funzione di dimensionamento intrinseco (contenuto minimo, contenuto massimo, auto, contenuto adattato ()) o
  • Una funzione di dimensionamento flessibile (flessibile).

Quello che credo accada sotto il cofano è che gli oggetti della griglia vengono posizionati.

Cioè, viene determinato il blocco contenitore per l'articolo, quindi viene determinata la funzione di dimensionamento per l'articolo. Questo a sua volta influenza la dimensione delle tracce della griglia.

Vedi?

Non è quello che pensavi inizialmente.

4. Per impostazione predefinita, gli elementi della griglia vengono allungati per adattarsi alla loro area della griglia, tranne in alcuni casi

Senza il tuo intervento, gli elementi della griglia si allungheranno sempre per adattarsi alla loro area della griglia.

Quindi, se avessi una dichiarazione del genere:

grid-template-areas: 'header header header'
                     'sidebar main main'
                     "footer footer footer"

E hai avuto div assegnati alle specifiche aree della griglia, in questo modo:

.div1 {
   area griglia: intestazione
}
.div2 {
   area griglia: barra laterale
}
.div3 {
   area griglia: principale
}
.div4 {
   area griglia: piè di pagina
}

Non è necessario dichiarare la larghezza e l'altezza dei div al di sopra del 100%

Si allungheranno automaticamente per riempire le rispettive aree.

Ora, ecco il trucco.

Questo comportamento non è coerente con le immagini.

Come sottolineato da Rachel Andrew, le specifiche continuano a dire che questo comportamento è diverso per gli elementi della griglia con proporzioni intrinseche.

Non lasciare che le grandi parole ti spaventino. Non è un demogorgone.

Un'immagine è di default un elemento inline block, ma ha anche dimensioni specifiche. Hanno dimensioni naturalmente associate a loro. Un'immagine può avere una larghezza di 400 x 600 pixel o qualsiasi dimensione data.

Tuttavia, gli elementi di blocco regolari come i div non hanno dimensioni intrinseche. Cioè, non hanno dimensioni che appartengono naturalmente a loro.

Pertanto, mentre gli elementi della griglia senza dimensioni intrinseche si allungheranno per adattarsi alla loro area della griglia, ciò non è vero per gli elementi della griglia con una dimensione intrinseca, ad esempio immagini.

5. Sai davvero cos'è un oggetto griglia?

Considera il blocco di codice qui sotto:

    
blocco     
galleggiare         Sono un testo casuale              punto 4     

Nel blocco di codice sopra, puoi individuare gli elementi della griglia?

Quanti elementi della griglia ci sono nel blocco di codice, 3 o 4?

Ho fallito palesemente questa domanda.

Nota che il testo I am a random non è racchiuso tra tag html.

cos'è questo?

Allora, qual è la tua risposta?

Bene, se hai risposto 3, ti sbagli. Ah ah, capito!

Secondo le specifiche, un elemento di griglia anonimo è racchiuso attorno a ciascuna sequenza di testo all'interno di una griglia.

Sì, ciò significa che sono un testo casuale anche un elemento della griglia.

blocco     
galleggiare
    
    Sono un testo casuale

    
        punto 4
    

Sì, la risposta è 4. Abbiamo 3 elementi espliciti della griglia e 1 elemento anonimo della griglia!

Capito?

6. I margini degli elementi della griglia adiacenti non si riducono.

Esistono grandi differenze tra gli elementi a blocchi e i contenitori della griglia.

Voglio dire, un elemento con display: block e un altro con display: grid hanno molte differenze fondamentali.

La differenza che sto scegliendo di discutere qui ha a che fare con i margini pieghevoli.

Una delle prime cose che impari con i CSS è il concetto di margini pieghevoli. Non voglio passare molto tempo a spiegare cosa significano i margini pieghevoli. Se lo fai apparire nei commenti, lo farò.

Quindi, tornando alle griglie.

Con ogni elemento della griglia, i margini non vengono mai compressi.

Bene, questo è comprensibile. Lascia che ti mostri il perché.

Gli elementi della griglia adiacenti sono contenuti indipendentemente all'interno del blocco contenitore formato dalle loro aree della griglia.

Ciò che significa quel paragrafo complesso sopra è questo. Ogni elemento della griglia vive e respira all'interno di un'area della griglia

Gli elementi della griglia vengono posizionati nelle rispettive aree della griglia. Rimangono nei loro territori indisturbati. Non sono interessati dai margini pieghevoli. Come cool.

Quindi, tecnicamente, potresti dire che l'elemento della griglia non è un vicino immediato degli altri elementi della griglia. Ma è contenuto in un territorio chiuso ininterrotto: l'area della griglia.

Se sei curioso di sapere quali altre differenze esistono tra elementi a blocchi ed elementi a griglia, ho scritto un articolo interessante sull'argomento.

7. riempimento automatico e adattamento automatico. Qual è la differenza?

Mentre il riempimento automatico e l'adattamento automatico sembrano le stesse funzioni, sono diverse in un certo senso.

Sono simili nel senso che consentono di creare automaticamente tracce di griglia che riempiono il contenitore della griglia in qualche modo.

Ad esempio, il codice seguente creerà tutte le colonne di 200 px che si adattano alla larghezza della finestra. Se c'è spazio rimanente, verrà distribuito tra le colonne da 200px.

body {
  display: griglia;
  grid-template-colonne: ripeti (riempimento automatico, minmax (200px, 1fr));
}

Qual è la differenza?

il riempimento automatico creerà tracce anche se non è presente alcun elemento della griglia per riempirlo. l'auto-fit non lo farà. Sgonfia le tracce vuote a zero.

È tutto.

8. Nella definizione delle aree del modello di griglia, il numero di parole in una stringa DEVE essere uguale.

Ricordi i valori bizzarri delle aree del modello della griglia che sembrano una mappa?

Bene, sembra che possa rovinare le cose molto velocemente.

In una dichiarazione di aree modello griglia, tutte le stringhe devono avere lo stesso numero di colonne, altrimenti la dichiarazione non è valida.

Per esempio:

/ * questo è valido * /
grid-template-areas: "barra laterale intestazione intestazione intestazione"
                     "barra principale principale principale"
                     "barra principale principale principale"
/* questo è sbagliato */
grid-template-areas: "barra laterale intestazione intestazione intestazione"
                     "barra principale principale principale"
                     "barra laterale principale principale"

Il numero di parole nelle stringhe deve essere uguale.

9. Evitare di utilizzare interamente le percentuali nelle imbottiture o nei margini sugli elementi della griglia

Dalle specifiche della griglia CSS

Il motivo dietro questo è semplice. Al momento della stesura di questo articolo, otterrai un comportamento diverso in diversi browser.

Secondo le specifiche, la percentuale può essere risolta rispetto alla sola larghezza dell'elemento, oppure i margini sinistro / destro rispetto alla larghezza mentre la parte superiore / inferiore sono risolte rispetto all'altezza

Al fine di avere un rendering coerente sulla maggior parte dei browser, evita di usare percentuali in padding o margini degli elementi della griglia.

Ancora più importante, ci sono già alcuni bit confusi con la griglia CSS. Non spararti al piede con percentuali di imbottiture o margini negli elementi della griglia.

10. Come viene risolta la dimensione della griglia esplicita in caso di conflitto?

Supponiamo di avere una dichiarazione della griglia in questo modo:

grid-template-areas: "barra laterale intestazione intestazione intestazione"
                     "barra principale principale principale"
                     "barra principale principale principale"

Nel blocco di codice sopra, hai 4 colonne e 3 righe.

E se facessi anche questo:

grid-template-column: repeat (5, 1fr)
grid-template-lines: repeat (4, 1fr)

Ora hai più colonne e righe. 5 colonne e 4 righe.

Hai capito?

Ora c'è un conflitto nelle dichiarazioni. Quindi, come viene risolto?

Secondo le specifiche, la dimensione della griglia esplicita è determinata dal maggiore tra il numero di righe / colonne definito da aree-griglia-modello e il numero di righe / colonne dimensionate da griglia-modello-righe / griglia-modello-colonne .

Le specifiche possono sembrare complicate una cosa semplice. In parole semplici, ciò significa che vince la dichiarazione con il maggior numero di righe o colonne.

Nell'esempio sopra, la griglia occuperà 5 colonne e 4 righe NON 4 colonne e 3 righe.

* EDIT: la proprietà grid-template-areas viene utilizzata per posizionare gli elementi della griglia su una griglia. Quindi, perché dovremmo avere un conflitto nella definizione della griglia? Le griglie non dovrebbero essere definite solo con le proprietà grid-template-column e grid-template-lines? Rispondo a questo nella sezione commenti. Controlla.

11. La dimensione della griglia non è puramente la somma delle dimensioni della traccia

Le tracce della griglia si riferiscono alla distanza tra le linee della griglia.

Anche se questo è semplice, vale la pena ricordare che hai impostato una griglia a larghezza fissa.

La dimensione della griglia può essere influenzata dal gap riga-griglia, gap colonna-griglia e giustificazione-contenuto, allinea-contenuto. Che purtroppo, può aggiungere ulteriore spazio tra le tracce.

Quindi, fai attenzione durante il calcolo di larghezze fisse all'interno della griglia.

BONUS: Tutti possiamo contribuire a migliorare i DOCS

Perché sono un'anima gentile, ho aggiunto un altro suggerimento qui

La specifica è stata scritta da umani. E succede così che gli umani possono commettere errori.

Durante la lettura delle specifiche, ho notato un piccolo errore di battitura.

All'epoca non ero particolarmente sicuro di cosa fare. Quindi, ho chiesto in giro su Twitter.

Il tipo di Jen Simmons ha aiutato a presentare un problema su github e questo è stato risolto.

Allora, qual è la morale?

Puoi aiutare a migliorare i documenti contribuendo in qualunque modo possibile.

Si tu!

Rendiamo il Web migliore, insieme.

Vuoi diventare un professionista?

Scarica la mia guida alla griglia CSS gratuita e ottieni gratuitamente due corsi interattivi Flexbox di qualità!

Come padroneggiare la griglia CSS e cosa costruire lungo il percorso (Guida PDF gratuita)

Ricevili ora