CSS Grid Layout saladused on avaldatud

Sisu

• 01. Funktsioon Minmax ()
• 02. Automaatne täitmine ja automaatne sobitamine
• 03. Tihe pakkimisrežiim
• 04. Maagilised jooned ja maagilised alad
• 05. Vaikimisi joondamine
• 06. Tagasilöögid
• 07. Suuruse määramine min-sisu ja max-sisuga
• 2. taseme funktsioonid
• 08. Lüngad muutuvad
• 09. Grid pole müüritise
• 10. Võrgustiku pseudoelemendid

CSS Grid Layout käivitati brauserites 2017. aasta märtsis ja selle kirjutamise ajal on enam kui 70 protsendil enamiku saitide külastajatest Gridi tugi. See arv kasvab kiiresti ja paraneb, kui Edge pakub oma ajakohastatud tuge.

Loodan, et teil on juba olnud võimalus CSS Grid Layouti mõningaid funktsioone uurida. Selles artiklis heidetakse pilk mõnele funktsioonile, millest võite ilma jääda. Vaatan ka mõningaid asju, mis võivad tulla spetsifikatsiooni tulevastel tasemetel.

01. Funktsioon Minmax ()

Erinevalt teistest paigutusmeetoditest, kus peame seadistama üksuse enda suuruse, määrame võrgukujunduses suuruse konteineri tasemele. Määratleme rajad, mis loovad ruudustiku lahtrid, kuhu sisu saab paigutada.

Selleks, et seda teha paindlikult, võimaldades sisu, mis võib olla kavandatust väiksem või suurem, toob Grid CSS-i uusi funktsioone. Üks neist on minmax () funktsioon. See funktsioon tähendab, et saate määrata raja minimaalse ja maksimaalse suuruse.

Allolevas näites on mul korralik paneel, mille vasakus ülanurgas on pealkiri ja paremal suur pilt. Ma tahan, et ülemine rida oleks vähemalt 150 pikslit pikk, olenemata sellest, mitu rida pealkirja või muud sisu vaja võib minna.

Kui aga sisuridu on rohkem või teksti suurus on suurem, tahan, et see ruut kasvaks suuremaks kui 150 pikslit. Siin ma kasutan minmax (), määrates minimaalse suuruse 150 pikslit ja maksimaalselt automaatse.

.grid {display: grid; ruudustiku-malli-veerud: 1,2fr 1fr; ruudustiku-malli-read: minmax (150px, auto) minmax (300px, auto); }

Kasutades minmax (), kui meil on selles kastis lihtsalt pealkiri, on kast suurem kui vajalik ruum. Kui meil on pikem pealkiri ja lisatekst, laieneb see ruumi tegemiseks.

02. Automaatne täitmine ja automaatne sobitamine

Flexbox võimaldab paljusid tundlikke kujundusmustreid, ilma et peaksime meediumipäringutele toetuma. Võrgustik läheb siiski sammu kaugemale, võimaldades paindlikke kujundusmustreid, kus esemed on reas kahes mõõtmes: rea ja veeru kaupa. Kasulik muster on see, et pakendis võib olla nii palju veerge kui mahub, ja selleks kasutame kahte uut märksõna: automaatne täitmine ja automaatne sobivus.

Konteinerisse mahutamiseks nii palju kui 200 pikslist veerurada, kasutage järgmiste loendite loendit:

.grid1 {display: grid; ruudustik-mall-veerud: kordus (automaatne täitmine, 200 pikslit); }

Nende veergude paindlikuks muutmiseks, kuid minimaalseks 200-pikseliseks hoidmiseks, tooge sisse minmax () funktsioon, mida kirjeldasin eelmises näpunäites. Saame luua veerge, mis on vähemalt 200 pikslit ja maksimaalselt 1fr. Pärast seda, kui palju 200-piksliseid veerusid mahub, määrab brauser meie veergude vahel võrdselt ruumi.

.grid1 {display: grid; ruudustiku-malli-veerud: kordus (automaatne täitmine, minmax (200 pikslit, automaatne)); }

Olen kasutanud automaatne täitmine märksõna siin; see hoiab lugude jaoks ruumi ka siis, kui nende jaoks sisu pole. Kui selle asemel kasutate automaatne sobivus, kõik täiesti tühjad rajad ahendatakse ja nende ruum määratakse teistele rööbastele.

03. Tihe pakkimisrežiim

Kui deklareerite kuva: ruudustik elemendi puhul muutuvad kõik otsesed lapsed ruudustikuobjektideks ja elemendid hakkavad sellel võrgul automaatselt asetuma. See juhtub spetsifikatsioonis määratletud automaatse paigutuse reeglite põhjal.

Kui mõned teie üksustest ulatuvad rajadesse ja see tähendab, et on üksusi, mis ei mahu saadaolevasse rööbasse, loovad nad ruudustikus uue rea. Vaikimisi liigub Grid edasi ja kuvab teie üksused allikas kuvatavas järjekorras.

Kui aga määrate väärtuse grid-auto-flow kuni tihe, Grid hakkab pärast nendest tühikutest lahkumist tagasi pöörduma. Kui ta leiab eseme, mis mahub juba alles jäänud tühimikku, võtab ta selle kätte ja asetab selle allikakorrast väljapoole.

.grid {display: grid; grid-auto-flow: tihe; ruudustiku-malli-veerud: kordus (automaatne täitmine, minmax (200 pikslit, 1fr)); }

See käitumine on kasulik, kui kuvatavatel üksustel pole loogilist järjekorda, kuid võite klaviatuuri abil navigeeriva inimese paigutuse hõlpsalt muuta, kui ta tegeleb üksuste vahel tabeldamisega. Kasutage seda funktsiooni väga hoolikalt ja katsetades!

04. Maagilised jooned ja maagilised alad

Kui kasutate võrgu malli alade meetodit sisu paigutamiseks, loote oma võrku nimelise ala. See loob omakorda ridade ja veergude jaoks nimega ridade komplekti, millega kasutatakse piirkonna nime - alusta ja -lõpp lisatud. Selles järgmises näites olen ülekatte paigutamiseks kasutanud oma ruudustikualade positsioneerimisel loodud ridu.

.grid {display: grid; ruudustiku-malli-veerud: 1fr 2fr 1fr; ruudustik-automaatsed read: minmax (100 pikslit, automaatne); grid-template-areas: "sd1 sisu sd2" "sd1 jalus sd2"; } .side1 {ruudustikuala: sd1; } .side2 {ruudustikuala: sd2; } .content {grid-area: content; } .jalg {võrguala: jalus; } .grid .overlay {ruudustiku-veerg: sd1-start / sd2-end; ruudustik-rida: sisu-algus / jalus-lõpp; }

See töötab vastupidiselt, kui kasutate nimega ruudustiku ridu. Kui nimetate ridu, mis lõpevad - alusta ja -lõpp veergude ja ridade jaoks loote kasutatava põhinime nimelise ala.

Liinidega määratletud ala sisu-algus ja sisulõpp ridade ja veergude jaoks oleks nime sisu. Saate paigutada eseme sellesse piirkonda grid-area: sisu.

05. Vaikimisi joondamine

Kui üksusest saab ruudustik, on vaikimisi käitumine selle ruudustikualal; see tähendab, et kui element pole sisemise kuvasuhtega. Kui üksusel on kuvasuhe, joondatakse see algusjoonega nii rea kui veeru suunas. See tähendab, et Grid ei venita teie pilte vaikimisi proportsioonidest välja, ehkki saate seda muidugi teha, kui soovite joonduskäitumist muutes.

06. Tagasilöögid

CSS Grid'i spetsifikatsiooni on kirjutatud üksikasjad selle kohta, kuidas CSS Grid Layout alistab muud paigutusmeetodid. Kui teil on üksus, mis on hõljunud, kasutab kuva: tabel või kuva: seesmine plokk ja muutub seejärel ruudustikuüksuseks, selgitab spetsifikatsioon, mis juhtub.

Lühidalt, kui üksusest saab ruudustik, leiate:

• Kui see on hõljunud või kasutab selget omadust, lakkavad need omadused üksust mõjutamast.
• Kui sellel on ekraan: sees-blokeerida või kasutab tabeli omadust nagu kuva: tabel-lahter need ei kehti enam.
• Tabeli omaduste korral anonüümsed kastid, mis genereeritakse kasutamise ajal kuva: tabel-lahter ilma vanematabelita enam ei looda.
• vertikaalselt joondama enam ei kehti.

Lõin petulehe, mis kirjeldab neid alistamisi näidetega. Selle leiate minu saidilt.

Ehkki sellele ülekaalukale käitumisele tuginemine töötab paljudel juhtudel, peate hoolitsema üksuste jaoks seatud laiuste eest, mis hiljem muutuvad ruudustikuüksusteks. Eelmistes paigutusmeetodites kontrollime üksuse laiust üksusel.

Gridiga paigutame üksuse võrku lahtrisse, mis seda piirab. See tähendab, et kui teil on üksus, mille protsendilaius on seatud, lahendatakse see laius protsendiks ruudustikupiirkonnast, kui üksusest saab ruudustikuüksus.

Selle lahenduseks on veel üks CSS-i spetsifikatsioon: funktsioonipäringud. Võrgustiku paigutuse toe testimiseks saame kasutada funktsioonipäringut. Kui brauser toetab võrku, määrasin laiuseks automaatse.

.grid> div {ujuk: vasak; laius: 33,333%; } @supports (display: grid) {.grid> div {laius: auto; }}

07. Suuruse määramine min-sisu ja max-sisuga

CSS-i sisemise ja välise suuruse mooduli 3. taseme spetsifikatsioon määratleb suuruse määramiseks täiendavad märksõnad. Nende märksõnade hulka kuuluvad min-sisu ja max-sisu, mida saab kasutada võrguradade suuruse määramiseks.

Väga lihtsa näitena olen loonud kahesambalise ruudustiku. Üks veerg on määratletud järgmiselt min-sisu suurus, teine ​​veerg max-sisu. Esimene lugu on ainult nii suur, kui on vaja sisu ühe sõna kuvamiseks - see on minimaalne suurus, mis see rada saab olla. Teine laieneb kogu rea kuvamiseks, mis võib põhjustada ülevoolu, mida peate haldama ja millega peate tegelema.

.grid {display: grid; ruudustik-mall-veerud: min-content max-content; }

2. taseme funktsioonid

Võrgu spetsifikatsioon on nüüd kandidaatide soovituse olekus, mis tähendab, et loodame, et spetsifikatsioonis ei tehta suuri muudatusi; selle asemel liigub see edasi faasi, kus otsime iga funktsiooni kohta vähemalt kahte rakendust. See tagab, et spetsifikatsioon on mõistlik ja brauserid saavad selle rakendada.

Gridi jaoks on asjad aga endiselt käimas ja selle artikli ülejäänud osas vaatleme hiljutist muudatust 1. taseme spetsifikatsioonis ja paari asja, mida me võime 2. tasemel oodata.

08. Lüngad muutuvad

The grid-gap lühike, pluss pikakäeline ruudustik-veerg-vahe ja võre-rida-vahe atribuudid muudeti CSSi töörühma 2017. aasta augusti koosoleku ajal lõhe, veergude vahe ja reavahe. Neile on viidud ka nende definitsioonid kasti joondamise spetsifikatsiooni.

See on spetsifikatsioon, mis võttis Flexboxi kena joondamise funktsioonid välja ja laienes, nii et neid saaks kasutada ka võrgus - ja potentsiaalselt ka muudes paigutusmeetodites.

Puudujoonte lisamine lahtrisse joondamise spetsifikatsiooni ja nende nimetamine üldisemal viisil tähendab, et neid saab kasutada ka teistes paigutustüüpides, kui neil on mõtet. Ilmne koht, kus neil on mõtet, on Flexboxis.

See ümbernimetamine tähendab, et lõpuks saame Flexboxis korralikud lüngad; marginaalidega enam ei jamas. Brauserid varjavad vanu nimesid uutega, nii et kui olete võrgukujunduses juba tühikuid kasutanud, siis see kood ei purune. Mõlemad omadused võiksite siiski lisada ka ise; brauserid eiravad seda, mida nad ei toeta.

09. Grid pole müüritise

Kui inimesed näevad esimest korda tihedat pakkimisrežiimi, mida ma selles artiklis varem demonstreerisin, arvavad nad sageli, et Grid saab teha müüritise paigutusmustrit. Müüritis on aga täiesti erinevat tüüpi paigutus. Tavaline müüritise paigutus ei ole range võre, mistõttu see muster istub kusagil selle vahel, milles Flexbox on hea ja mida Grid teeb.

CSSi töörühmas mõtleme aga sellele teemale. See on midagi, mida me teame, et arendajad tõesti tahavad osata. Arutelu leiate CSS WG mustandite hoidlast GitHubis ja saate isegi oma mõtted lisada.

10. Võrgustiku pseudoelemendid

Ruudustiku paigutuse teine ​​levinud funktsioonitaotlus on võime kujundada ruudustiku lahtrid või alad, ilma et oleks vaja stiilis elementi sisestada. Praegu peate alade piiride lisamiseks lisama märgistusele tühja elemendi või kasutama loodud sisu ruudustikuvõimaluse loomiseks.

On tõstatatud küsimus seoses kaalumisega mingisuguse pseudoelemendi lisamiseks võrgualadele. Järelikult annaks see teile midagi sihitavaks, kui soovite konkreetsele alale tausta või piire lisada ilma lisamärgistust lisamata või loodud sisu kasutamata.

See artikkel ilmus algselt väljaande 298 väljaandes netiajakiri, ajakiri professionaalsetele veebidisaineritele ja arendajatele - pakub uusimaid uusi veebitrende, tehnoloogiaid ja tehnikaid. Osta väljaanne 298 siit või tellige võrk siin.

Meeldis see? Loe neid!

• Looge CSS Gridiga reageeriv paigutus
• Kiirustage CSS Gridiga
• Juhend parema CSS-i kirjutamiseks