Layout griglia CSS colonne fluide e canalizzazioni migliori

In questo tutorial stiamo andando a prendere la griglia dal nostro tutorial precedente e usarlo come un parco giochi per guardare oltre in Grid. Miglioreremo il modo in cui definiamo i nostri canali di scolo, esploriamo i layout flessibili, i fr unità, e introdurre il ripetere() funzione.

Unità flessibili

L'intero punto di Grid è di permetterci di controllare correttamente il layout sul web, quindi rendiamo la nostra griglia statica fluida prima di andare oltre. Se ricordi, stavamo definendo la nostra griglia con misure di pixel statici:

grid-template-columns: 150px 150px 150px; grid-template-rows: auto auto auto; intercapedine: 20px; 

È anche possibile utilizzare anche altre unità qui, come ad esempio ems o rems. O anche unità più insolite come vh e vmin. 

In questo caso, cambieremo le nostre unità pixel per le percentuali. 

grid-template-columns: 33.33% 33.33% 33.33%;

Hmm, è un po 'complicato, ma fa un po' il lavoro. Noterai che le larghezze delle colonne ora aumentano fino al 100%; le nostre grondaie saranno sottratte da loro automaticamente. grid-gap accetterà unità fisse o flessibili, il che significa che possiamo perfettamente combinare colonne fluide e grondaie fisse senza calcoli complessi da parte nostra.

Ripetere

Scriviamo questo è un modo più ordinato, usando il ripetere() funzione:

grid-template-columns: repeat (3, 33.33%);

Questo afferma "Ripeti 33.33% tre volte" dandoci tre colonne. E noi nemmeno bisogno il grid-template-righe dichiarazione perché il auto il valore è assegnato come predefinito in ogni caso. 

Nota: quando le colonne sono definite usando i valori%, useranno esattamente quei valori e ne aggiungeranno grid-gap in cima. Noterai che la griglia sopra è stata spostata a destra perché ora è larga al 99,99% più le interruzioni di griglia.

L'unità fr

Un ultimo miglioramento può essere apportato alla nostra semplice griglia e risolverà il problema della larghezza che abbiamo appena menzionato; introdurremo il fr, o frazione unità. Una singola unità fr descrive "Un pezzo di tanti pezzi che stiamo suddividendo in questo". Ad esempio, potremmo dichiarare le nostre colonne usando:

 grid-template-columns: 1fr 1fr 1fr;

Qui c'è un totale di tre unità fr, quindi ogni colonna dovrebbe essere larga un terzo. Ecco un altro esempio:

 grid-template-columns: 2fr 1fr 1fr

Ora c'è un totale di quattro unità fr, quindi la prima colonna occuperebbe metà della larghezza disponibile, con le altre due colonne per un quarto.

Queste unità sono davvero potenti, specialmente in combinazione con altre unità di misura:

grid-template-columns: 300px 1fr 3fr 20%;

Qui abbiamo dichiarato quattro colonne: 

• il primo è fissato a 300 px di larghezza
• l'ultimo è un 20% flessibile dell'elemento del contenitore della griglia
• quindi vengono calcolate le unità fr, tenendo conto anche delle grondaie, lasciando la seconda colonna con un pezzo dello spazio rimanente
• e il terzo con tre pezzi.

Sembra questo, evidenziando perfettamente il posizionamento automatico mentre i nostri nove elementi si spostano per colmare le lacune:

Ma torniamo alla nostra griglia originale. Sostituiamo il valore 33,33% impreciso e impreciso con 1fr: 

 grid-template-columns: repeat (3, 1fr);

Penna finita:

Conclusione

Quindi, per riassumere:

1. La griglia accetterà unità flessibili in combinazione con unità di misura fisse.
2. Il ripetere() la funzione ci farà risparmiare tempo e manterrà i nostri fogli di stile mantenibili.
3. Il fr, o frazione l'unità è un modo molto potente di descrivere i modelli di griglia.

Abbiamo fatto molta strada in soli due tutorial, ma ora sei l'orgoglioso proprietario di una griglia molto ordinata e concisa! Nel prossimo tutorial esploreremo le aree della griglia, dando un'occhiata al campata parola chiave e alcuni layout pratici.

Risorse utili

• Il tipo e fr unità su W3C
• Di nuovo, segui @rachelandrew