Guida al layout griglia Grid Unità Fr
Il Modulo layout griglia CSS è stato spedito con un nuova unità CSS chiamato il fr unità. Per quanto semplice possa essere, fr è il abbreviazione della parola “frazione”. La nuova unità consente di suddividere rapidamente la griglia in colonne o righe proporzionali. Di conseguenza, la creazione di griglie completamente reattive e flessibili diventa quasi una brezza.
Dato che l'unità frazione è stata introdotta insieme al modulo Grid Layout, è possibile utilizzarla in qualsiasi browser supporta la griglia CSS. Se vuoi anche supportare i browser più vecchi, ecco un grande Polyfill griglia CSS che ti permette di usare non solo il fr unità ma anche altre caratteristiche della griglia.
Utilizzo di base
Per prima cosa, diamo un'occhiata a griglia di base che usa l'unità di frazione. Il layout sottostante divide lo spazio in tre colonne di uguale larghezza e due file di uguale altezza.
L'HTML di appartenenza è composto da sei div contrassegnato con .scatola classe, dentro a .involucro div.
1.2.3.4.5.6.
Per utilizzare il modulo Layout griglia, è necessario aggiungere il display: grid; Proprietà CSS per il wrapper. Il grid-template-colonne la proprietà usa il fr unità come valore; il il rapporto tra le tre colonne è 1: 1: 1.
Per le righe della griglia (grid-template-righe proprietà), non ho usato il fr unità, come ha senso solo se l'involucro ha un'altezza fissa. Altrimenti, può avere strani risultati su alcuni dispositivi, tuttavia, anche allora fr unità mantiene il rapporto (e questo è enorme).
Il grid-gap proprietà aggiunge una griglia 10px tra le scatole. Se non vuoi lasciare spazi vuoti, rimuovi questa proprietà.
.wrapper display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px 200px; intercapedine: 10px; .box color: white; allineamento del testo: centro; font-size: 30px; imbottitura: 25px;
Nota che il CSS sopra non contiene alcuni stili di base come i colori di sfondo. Puoi trova il codice completo nella demo alla fine dell'articolo.
Cambia rapporto
Certo, non puoi usare solo 1: 1: 1 ma qualsiasi rapporto tu voglia. Sotto, ho usato Frazioni 1: 2: 1 che divide anche lo spazio in tre colonne ma la colonna centrale sarà due volte più largo come gli altri due.
Ho anche aumentato il valore di grid-gap in modo che tu possa vedere come cambia il layout. In sostanza, il browser deduce il gap di griglia dalla larghezza della finestra (in questo esempio, gli intervalli di griglia si sommano a 80 px) e affetta il resto secondo le frazioni date.
.wrapper display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 200px 200px; intercapedine: 40px;
combinare fr con altre unità CSS
Puoi combinare il fr unità con qualsiasi altra unità CSS anche. Ad esempio, nell'esempio seguente, ho usato il 60% 1fr 2fr rapporto per la mia griglia.
Quindi, come funziona? Il browser assegna il 60% della larghezza della finestra alla prima colonna. Quindi, divide il resto dello spazio in frazioni 1: 2.
La stessa cosa potrebbe anche essere scritta come 60% 13.33333% 26.66667%. Ma francamente, perché qualcuno dovrebbe voler usare quel formato? Un enorme vantaggio di unità di frazione è che migliora la leggibilità del codice. Inoltre, lo è completamente accurato, dato che il formato percentuale si aggiunge ancora solo al 99,9999%.
.wrapper display: grid; grid-template-columns: 60% 1fr 2fr; grid-template-rows: 200px 200px; intercapedine: 10px;
Oltre alle percentuali, puoi anche usare altre unità CSS per esempio con l'unità di frazione pt, px, em, e rem.
Aggiungi spazi bianchi con fr
Cosa succede se non vuoi che il tuo design sia ingombrante e aggiungi degli spazi bianchi alla tua rete? L'unità di frazione ha anche una soluzione semplice per questo.
Come puoi vedere, questa griglia ha una colonna vuota mentre conserva ancora tutte e sei le scatole. Per questo layout, abbiamo bisogno di suddividere lo spazio in quattro colonne invece di tre. Quindi, usiamo il 1fr 1fr 1fr 1fr valore per il grid-template-colonne proprietà.
Aggiungiamo la colonna vuota all'interno del Grid-template-aree proprietà, utilizzando il notazione a punti. Fondamentalmente, questa proprietà ti permette di riferimento alle aree di griglia denominate. E, puoi nominare le aree della griglia con il grid-zona proprietà che è necessario utilizzare separatamente per ogni area.
.wrapper display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 200px 200px; intercapedine: 10px; grid-template-areas: "box-1 box-2. box-3" "box-4 box-5. box-6"; .box-1 grid-area: box-1; .box-2 grid-area: box-2; .box-3 grid-area: box-3; .box-4 grid-area: box-4; .box-5 grid-area: box-5; .box-6 grid-area: box-6;
Le aree degli spazi bianchi non devono necessariamente formare una colonna, essi può essere ovunque nella griglia.
Il ripetere() funzione
Puoi anche usare il fr unità insieme al ripetere() funzione per un sintassi più semplice. , questo non è necessario se si ha una griglia semplice ma può tornare utile quando si vuole implementare un layout complicato, per esempio a griglia annidata.
.wrapper display: grid; grid-template-columns: repeat (3, 1fr); / * grid-template-columns: 1fr 1fr 1fr; * / grid-template-rows: 200px; intercapedine: 10px;
Il ripeti (3, 1fr) sintassi risultati nello stesso layout come 1fr 1fr 1fr. Il layout sottostante è lo stesso del primo esempio.
Se tu aumentare il moltiplicatore dentro il ripetere() funzione avrai più colonne. Per esempio, ripeti (6, 1fr) risultati in sei colonne uguali. In questo caso, tutte le nostre scatole sarà nella stessa riga, il che significa che è sufficiente usare un solo valore (200px) per il grid-template-righe proprietà.
.wrapper display: grid; grid-template-columns: repeat (6, 1fr); grid-template-rows: 200px; intercapedine: 10px;
Puoi usare ripetere() più di una volta. Ad esempio, il seguente esempio genera una griglia in cui si trovano le ultime tre colonne due volte più largo come i primi tre.
.wrapper display: grid; grid-template-columns: repeat (3, 1fr) repeat (3, 2fr); grid-template-rows: 200px; intercapedine: 10px;
Puoi anche combinare ripetere() con altre unità CSS. Ad esempio, potresti usare 200px repeat (4, 1fr) 200px come codice valido.
Se sei interessato a come creare layout complessi con il modulo Grid CSS, il ripetere() funzione e il fr unità Rachel Andrew ha un interessante post sul blog su come puoi farlo.
Una demo per sperimentare
Finalmente, ecco la demo che ho promesso. Utilizza lo stesso codice del primo esempio in questo articolo. Forchetta, e guarda cosa puoi ottenere con fr unità.
