CSS Grid Layout Coloane fluide și jgheaburi mai bune

În acest tutorial vom lua grila din tutorialul nostru anterior și îl vom folosi ca un loc de joacă pentru a privi mai departe în Grid. Vom îmbunătăți modul în care definim jgheaburile noastre, vom explora aspecte flexibile, fr unitate și introduceți repeta() funcţie.

Unități flexibile

Întregul punct al Grid-ului este să ne permită să controlăm în mod corespunzător aspectul pe web, deci să facem fluidul nostru static înainte să mergem mai departe. Dacă vă amintiți, am definit grila noastră cu măsurători statice de pixeli:

grilă-șablon-coloane: 150px 150px 150px; grilă-șablon-rânduri: auto auto auto; grilă-decalaj: 20 pixeli; 

Este posibil să folosiți și alte unități aici, cum ar fi ems sau rems, de exemplu. Sau chiar mai multe unități neobișnuite precum vh și vmin. 

În acest caz, vom schimba unitățile de pixeli în procente. 

grilă-șablon-coloane: 33,33% 33,33% 33,33%;

Hmm, asta e un pic dezordonat, dar asta-i treaba. Veți observa că lățimea coloanelor acum adaugă până la 100%; jgheaburile noastre vor fi scoase automat din acestea. grid-gap va accepta unitati fixe sau flexibile, ceea ce inseamna ca putem combina perfect coloanele cu fluide si jgheaburile fixe, fara calcule complexe din partea noastra.

Repeta

Să scriem acest lucru este un mod mai curat, folosind repeta() funcţie:

grilă-șablon-coloane: repetare (3, 33,33%);

Aceasta afirmă "Repetați de 33,33% de trei ori" dându-ne trei coloane. Și nici măcar nu nevoie  grid-șablon rânduri declarație deoarece auto valoarea este atribuită oricum implicită. 

Notă: când coloanele sunt definite folosind valorile%, ele vor folosi exact acele valori și vor adăuga orice grid-gap deasupra. Vei observa că grila de deasupra a fost împinsă spre dreapta, pentru că acum are o lățime de 99,99% la care se adauga decalajele de rețea.

Unitatea fr

O îmbunătățire finală poate fi făcută rețelei noastre simple și va rezolva problema de lățime pe care tocmai am menționat-o; o să prezentăm fr, sau fracțiune unitate. Se descrie o singură unitate fr "O bucată de câte bucăți vom împărți în". De exemplu, am putea declara coloanele noastre folosind:

 grilă-șablon-coloane: 1fr 1fr 1fr;

Aici există un total de trei unități fr, astfel încât fiecare coloană să fie de o treime lată. Iată un alt exemplu:

 grilă-șablon-coloane: 2fr 1fr 1fr

Acum, există un total de patru unități fr, astfel încât prima coloană ar ocupa jumătate din lățimea disponibilă, celelalte două coloane luând fiecare câte un sfert.

Aceste unități sunt foarte puternice, în special în combinație cu alte unități de măsură:

grilă-șablon-coloane: 300px 1fr 3fr 20%;

Aici am declarat patru coloane: 

• prima este fixată la 300px lățime
• ultimul este un flexibil flexibil de 20% din elementul container al grilei
• apoi se calculează unitățile fr, luând în considerare și jgheaburile, lăsând a doua coloană cu o singură bucată din spațiul rămas
• iar al treilea cu trei bucăți.

Se pare că acest lucru, subliniind perfect plasarea automată, se schimbă pentru a umple golurile:

Dar înapoi la grila noastră originală. Să înlocuim valoarea stîngă și inexactă de 33,33% cu 1fr: 

 grilă-șablon-coloane: repeat (3, 1fr);

Pix finit:

Concluzie

Deci, pentru a recapitula:

1. Grila va accepta unități flexibile în combinație cu unități fixe de măsurători.
2.  repeta() Funcția noastră ne va economisi timp și ne va păstra păstrarea foilor noastre de stil.
3.  fr, sau fracțiune Unitatea este o modalitate foarte puternică de a descrie șabloanele rețelei.

Am parcurs un drum lung în doar două tutoriale, dar acum sunteți proprietarul mândru al unei rețele foarte ordonate și concise! În următorul tutorial vom examina zonele de rețea, aruncându-ne o privire asupra deschidere cuvânt cheie și câteva aspecte practice.

Resurse utile

• și fr unitate pe W3C
• Din nou, urmați @rachelandrew