Vodič za CSS Grid raspored Fr jedinica
CSS modul rasporeda mreže je isporučen s nova CSS jedinica se zove fr jedinica. Kao što je lako moguće, fr je kratica riječi “frakcija”. Nova jedinica omogućuje brzo rezanje mreže u proporcionalne stupce ili retke. Kao rezultat toga, stvaranje potpuno prilagodljive i fleksibilne mreže postaje gotovo povjetarac.
Kako je jedinica frakcija predstavljena zajedno s modulom Grid Layout, možete ga koristiti u bilo kojem pregledniku podržava CSS mrežu. Ako želite podržati i starije preglednike, ovo je sjajno CSS mrežna polifila koji vam omogućuje ne samo korištenje fr ali i druge značajke mreže.
Osnovna upotreba
Prvo, pogledajmo a osnovna mreža koja koristi jedinicu frakcija. Raspored ispod dijeli prostor na tri stupca jednake širine i dva retka jednake visine.
Od toga je napravljen pripadajući HTML šest divova označeno s .kutija klasa, unutar a .omot div.
1.2.3.4.5.6.
Da biste koristili modul Grid Layout, morate dodati prikaz: rešetka; CSS svojstvo na omot. mreža-template-kolone svojstvo koristi fr jedinica kao vrijednost; omjer triju stupaca je 1: 1: 1.
Za retke u mreži (rešetke predloška-redaka imovine), nisam koristio fr jedinica, jer ima smisla samo ako je omot ima fiksnu visinu. Inače, na nekim uređajima može imati čudne rezultate, čak i tada fr jedinica ne održava omjer (a ovo je ogromno).
Rešetka-jaz svojstvo dodaje mrežu od 10 piksela između kutija. Ako ne želite nikakvu prazninu, jednostavno uklonite ovu nekretninu.
.omotač (prikaz: rešetka; grid-template-stupci: 1fr 1fr 1fr; grid-template-redaka: 200px 200px; rascjep mreže: 10px; .box boja: bijela; poravnavanje teksta: centar; veličina fonta: 30px; padding: 25px;
Primijetite da CSS iznad ne sadrži neke osnovne stilove kao što su boje pozadine. Možeš naći potpuni kod u demo na kraju članka.
Omjer promjene
Naravno, ne možete koristiti samo 1: 1: 1, ali bilo koji omjer koji želite. U nastavku sam koristio 1: 2: 1 frakcije koji također dijele prostor na tri stupca ali srednji stupac će biti dva puta šira kao i druga dva.
Također sam povećao vrijednost Rešetka-jaz tako da možete vidjeti kako mijenja izgled. U osnovi, preglednik oduzima razmak mreže od širine okvira za prikaz (u ovom primjeru, praznine u rešetkama daju do 80px), i rezati ostatak prema danim frakcijama.
.omotač (prikaz: rešetka; grid-template-stupci: 1fr 2fr 1fr; grid-template-redaka: 200px 200px; rascjep mreže: 40px;
Kombinirati fr s drugim CSS jedinicama
Možeš kombinirati fr s bilo koje druge CSS jedinice također. Primjerice, u primjeru ispod koristio sam 60% 1fr 2fr omjer za moju mrežu.
Dakle, kako ovo funkcionira? preglednik dodjeljuje 60% širine prikaza u prvi stupac. Zatim, ostatak prostora dijeli na 1: 2 frakcije.
Isto bi se moglo napisati kao 60% 13.33333% 26.66667%. Ali iskreno, zašto bi itko htio koristiti taj format? Velika prednost jedinice frakcija je u tome poboljšava čitljivost koda. Štoviše, to je potpuno točno, budući da postotni format još uvijek iznosi samo 99,9999%.
.omotač (prikaz: rešetka; grid-template-stupci: 60% 1fr 2fr; grid-template-redaka: 200px 200px; rascjep mreže: 10px;
Osim postotaka, možete koristiti i druge CSS jedinice zajedno s jedinicom za frakciju PT, px, em, i rEM.
Dodajte razmak s fr
Što ako ne želite da vaš dizajn bude pretrpan i dodajte malo razmaka u vašu mrežu? Jedinica za frakcije također ima jednostavno rješenje za to.
Kao što možete vidjeti, ova rešetka ima prazan stupac dok još zadržava svih šest kutija. Za ovaj raspored trebamo odrezati prostor u četiri stupca umjesto tri. Dakle, mi koristimo 1fr 1fr 1fr 1fr vrijednost za mreža-template-kolone svojstvo.
Unesemo prazan stupac unutar rešetke-predloška-područja imovine, koristeći točka notacija. U osnovi, ovo svojstvo vam omogućuje referentnim imenovanim mrežnim područjima. Možete označiti i područja mreže s oznakom Rešetka-područje imovine koju trebate koristiti odvojeno za svako područje.
.omotač (prikaz: rešetka; grid-template-stupci: 1fr 1fr 1fr 1fr; grid-template-redaka: 200px 200px; rascjep mreže: 10px; grid-template-područja: "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 područje mreže: okvir-3; .box-4 područje mreže: okvir-4; .box-5 područje mreže: okvir-5; .box-6 područje mreže: okvir-6;
Područja razmaka ne mora nužno formirati stupac, oni može biti bilo gdje u mreži.
ponoviti() funkcija
Možete koristiti i fr jedinica zajedno s ponoviti() funkcija za jednostavnija sintaksa. , ovo nije nužno ako imate samo jednostavnu mrežu, ali vam može dobro doći kada želite implementirati kompliciran raspored, na primjer a ugniježđena mreža.
.omotač (prikaz: rešetka; grid-template-stupci: repeat (3, 1fr); / * grid-template-stupci: 1fr 1fr 1fr; * / grid-template-redaka: 200px; rascjep mreže: 10px;
ponoviti (3, 1fr) sintaksa rezultate u istom rasporedu kao 1fr 1fr 1fr. Izgled ispod je isti kao i prvi primjer.
Ako ti povećati množitelj unutar ponoviti() funkcija koju ćete imati više stupaca. Na primjer, ponoviti (6, 1fr) Rezultati u šest jednakih stupaca. U ovom slučaju, sve naše kutije bit će u istom retku, što znači da je dovoljno koristiti samo jednu vrijednost (200px) za rešetke predloška-redaka svojstvo.
.omotač (prikaz: rešetka; grid-template-stupci: repeat (6, 1fr); grid-template-redaka: 200px; rascjep mreže: 10px;
Možeš koristiti ponoviti() više od jednom. Na primjer, sljedeći primjer rezultira mrežom u kojoj su zadnja tri stupca dva puta šira kao prva tri.
.omotač (prikaz: rešetka; grid-template-stupci: ponavljanje (3, 1fr) ponavljanja (3, 2fr); grid-template-redaka: 200px; rascjep mreže: 10px;
Također možete kombinirati ponoviti() s drugim CSS jedinicama. Na primjer, možete koristiti 200px repeat (4, 1fr) 200px kao važeći kôd.
Ako vas zanima kako stvoriti složene izglede s CSS Grid modulom, ponoviti() i funkcija fr Jedinica Rachel Andrew ima zanimljiv blog post o tome kako to možete učiniti.
Demo za eksperimentiranje
Konačno, ovdje je demo koji sam obećao. Koristi isti kod kao prvi primjer u ovom članku. Fork it, i vidjeti što možete postići s fr jedinica.
