Sisu
- Mis on CSS Grid?
- Kuidas määratleda ruudustik
- Üksuste positsioneerimine reanumbrite abil
- Üksuste paigutamine piirkondade nimede abil
- Kuidas luua tundlikku paigutust CSS Gridi abil
- CSS Gridi varundused vanematele brauseritele
- CSS Grid ressursid
Kuidas määratleda ruudustik
Paigutage üksused rea numbritega
Asetage üksused piirkondade nimede abil
Looge tundlik paigutus
Varukoopiad vanematele brauseritele
CSS Grid ressursid
CSS Grid Layout moodul tutvustab uut ja mitmekülgset süsteemi elementide positsioneerimiseks veebisaidi paigutuses, kasutades selleks väga kohandatavat ruudustikku. CSS Gridi toetavad nüüd kõigi suuremate brauserite kaks viimast versiooni, seega on aeg hakata seda kõigis projektides kasutusele võtma. Selles õpetuses vaatame põhjalikult, kuidas CSS Gridi põhiomadusi kasutada.
Muude võimaluste kohta vaadake meie parimate veebisaitide koostajate juhendit. Ja kontrollige kindlasti, kas teie veebimajutus töötab teie saidi vajadustele vastavalt.
- Vaadake selle õpetuse koodi
Mis on CSS Grid?
CSS Grid on äärmiselt võimas tööriist elementide paigutamiseks. See toob välja enneolematu paindlikkuse paigutuses, kasutades lihtsalt puhast CSS-i ja ilma absoluutselt positsioneerivate elementideta (tehnika, mis võib põhjustada palju probleeme). CSS Grid võimaldab meil saavutada sama täpse HTML-märgistusega äärmiselt mitmekesiseid ja seadmespetsiifilisi paigutusi.
Dünaamiliste, kuju muutvate paigutuste realiseerimiseks ei pea me enam tuginema häkkimisele, absoluutsele positsioneerimisele ega JavaScripti DOM-i manipuleerimisele. CSS Grid annab disaineritele tühja lõuendi, et luua soovitud paigutus, ilma et peaksite muretsema selle saavutamise pärast, avades uue veebidisaini ja -arengu ajastu, jättes kõrvale CSS-i piirangud ja mineviku lahendused.
Kuidas määratleda ruudustik
Võrgustiku loomiseks konteinerisse peab see olema atribuudiga CSS kuva: ruudustik. Veergude ja ridade arv määratakse tühikutega eraldatud suuruste arvu järgi ruudustik-mall-veerud ja ruudustik-mall-read.
Suurused võivad olla mis tahes kehtivad CSS-üksused, näiteks px või vwvõi automaatne märksõna, mis võimaldab veergudel või ridadel saadaolevas ruumis laieneda. Näiteks, ruudustik-mall-veerud: 10 pikslit automaatselt viib 10px veergu, millele järgneb teine veerg, mis täidab kogu vaba ruumi.
Ruudustik kasutab ka „murdosa“ ühikut fr mis põhjustab kogu ülejäänud ruumi jaotamise veergudele või ridadele nende ühikute suhtarvude põhjal. ruudustik-mall-read: 1fr 2fr loob kaks dünaamilist rida, teine on kaks korda suurem kui esimene, samas kui ruudustiku-malli-veerud: 1fr 1fr 1fr 1fr määratleb neli võrdse suurusega veergu. Viimast saab uue abil lihtsustada kordus () funktsiooni ruudustiku-malli-veerud: kordus (4, 1fr).
Võrgustiku saab seetõttu luua nelja võrdse suurusega, dünaamilise veeru ja nelja 75px pikkuse reaga (nagu eespool näidatud) klassi ruudustiku konteinerisse, kasutades:
.grid {display: grid; ruudustiku-malli-veerud: korrake (4, 1fr); ruudustik-mall-read: korrake (4, 75px); }
Ebaõigete suurustega lahtritega keerukaid võrke saab luua, kombineerides eelnevalt mainitud erinevaid üksusi. Saame kasutada ka minmax () funktsioon dünaamiliste veergude ja ridade minimaalse ja maksimaalse suuruse määratlemiseks. Seega ruudustiku-malli-read: 40px 2fr kordus (2, minmax (75px, 1fr)) viib nelja reani, mille esimene on 40 pikslit pikk, ülejäänud kolm sirutuvad ülejäänud ruumi suhtes suhtega 2: 1: 1 ja kahe viimase minimaalne kõrgus on 75 pikslit, mis määrab teise rea minimaalseks kõrguseks 150 pikslit.
Kui ruudustik on loodud, nummerdatakse ruudustiku jooned, mida kujutavad punktides jooned piltidel, ridade jaoks automaatselt ülevalt või veergudelt vasakult. Ridadele antakse ka teine negatiivne arv nende indeksi suhtes ridade alt või veergude puhul paremalt.
Näiteks ülal olevates ruudustikes vasakul on esimene punktiirjoonega vertikaalne joon 1 ja -5ja kolmas rida on 3 ja -2. Neid numbreid saab kasutada ruudustikku paigutatud üksuste piirjoontena. Ruudustiku ridu saab nimetada ka lisades atribuudideklaratsioonides nurksulgude vahele stringi, nt. ruudustiku-malli-read: [1.] 1fr [teine rida] 1fr [viimane].
Sarnaselt Flexboxiga saab võrku paigutatud esemete horisontaalset ja vertikaalset asendit reguleerida seadistamise teel õigusta-punkte ja joondage üksused vastavalt algus, Keskus, lõpp või venitada.
Sama kehtib ruudustiku veeru ja rea positsioonide jaoks suuremas konteineris, kasutades õigusta-sisu ja joondage sisu vastavalt. Nende omaduste kehtivad valikud hõlmavad ka järgmist tühiku vahel, kus lisaruum on jagatud veergude / ridade vahel, samuti ruumi ümber ja ruumi ühtlaselt kus ruum jaguneb veergude / ridade vahel ühtlaselt, mille otstes on ruumi sama palju või pool. Saame ka määratleda joondage sisu ja õigusta-sisu (selles järjekorras) kasutades koht-sisuja joondage üksused ja õigusta-punkte kasutades koht-esemed.
Üksuste positsioneerimine reanumbrite abil
Üksuse paigutamiseks ruudustikku saame selle seadistada ruudustik-veerg-algus ja ruudustik-veerg-ots omadused vertikaalsetele joontele, mille vahel üksus peaks olema venitatud. Ridade puhul on omadused ruudustik-rida-algus ja ruudustik-rida-ots - ja loomulikult viitavad numbrid horisontaalsetele joontele.
Saaksime kasutada ka lühikirjeldusi ruudustik-veerg ja ruudustik, seades need ainult algsele ruudustiku reale, mis põhjustab üksuse automaatselt ainult järgmise ruudustiku reani. Nagu ülaltoodud pildil, kasutades neid meetodeid, kirje1 saab paigutada vertikaalsete joonte 2 ja 4 ning horisontaalsete joonte 3 ja -1 vahele (viimane rida või esimene altpoolt) ja punkt2 vertikaalsest joonest 3 ja horisontaalsest joonest 1 järgmise ruudustiku jooneni, kasutades järgmist:
# item1 {ruudustik-veerg-algus: 2; ruudustiku-veeru ots: 4; ruudustik-rida-algus: 3; ruudustiku-rea lõpp: -1; } # item2 {ruudustik-veerg: 3; ruudustik: 1; }
Edasise lihtsustamise huvides on deklaratsioonid ruudustik-veerg-algus: 2 ja ruudustiku-veeru ots: 4 saab kokku kombineerida kui ruudustiku veerg: 2/4, sama kehtib rida kasutades ruudustik.
Nende paigutusmeetodite kasutamise hoiatus seisneb selles, et mõned deklaratsioonid on mõnevõrra ekslikud. Näiteks, ruudustiku-veeru ots: 4 ja ruudustiku veerg: 2/4 võib valesti tõlgendada nii, et need tähendavad vastavalt veeru „lõpp-üksuse paigutust veerus 4” ja „paiguta üksust veergudesse 2, 3 ja 4”. See pole muidugi nii, sest numbrid tähistavad pigem ruudustikujooni kui veerge. Selle võimaliku lõksu vältimiseks võime deklareerida algvõrgu rea numbri ja veergude või ridade arvu, mida üksus peaks kogu span-märksõna kasutama.
Neid meetodeid kasutades saame ümber paigutada kirje1 horisontaaljoonte 2 ja 4 ning vertikaalsete joonte 1 ja 2 vahel ning punkt 2, mis algab vertikaalsest joonest 2 ja ulatub kolme veeru ulatuses ning horisontaalsest joonest 3 kahes reas (nagu ülaltoodud pildil), kasutades järgmist:
# item1 {ruudustik-veerg: 1; võre rida: 2/4; } # item2 {ruudustik-veerg: 2 / span 3; võre rida: 3 / span 2; }
Uskuge või mitte, aga eseme paigutust saab selle varaga veelgi lihtsustada ruudustikuala, mis on lühikirjeldus ruudustik-rida-algus, ruudustik-veerg-algus, ruudustik-rida-ots ja ruudustik-veerg-ots selles järjekorras. Kui on määratletud ainult kaks esimest omadust, paigutatakse üksus automaatselt nende ja järgnevate ridade vahele.
See ruudustiku omadus võimaldab ka ridade numbreid ühendada span-märksõnaga. Neid meetodeid rakendades saame ümber paigutada kirje1 ja punkt2 nagu:
# item1 {ruudustikuala: 2/1 / span 2 / span 3; } # item2 {ruudustikuala: 4/4; }
Üksuste paigutamine piirkondade nimede abil
Ehkki kasutatakse ruudustiku numbreid ja span märksõna on suurepärane võimalus üksuste positsioneerimiseks, on veelgi intuitiivsem ja hõlpsam viis elemente võrku paigutada. See hõlmab ruudustikuala ja ruudustiku-malli-alad omadused.
Selle saavutamiseks tuleb igale võrku paigutatavale elemendile esmalt anda nimi, määrates selle ruudustikuala atribuut stringile, mille saab seejärel võrku lisada ruudustiku-malli-alad deklaratsioon. Seejärel saab võimalikuks määratleda ruudustiku-malli-alad kasutades visuaalset kaarti, milles read on jutumärkides, kusjuures iga ruudustiku lahtri sisu on tähistatud stringiga, mis ruudustikuala üksuste nimed.
Tühje lahtreid tähistab punkt (.) ja tühikud tähistavad vertikaalseid võrgujooni. Ridu saab paigutada uutele joontele, et anda ruudustik visuaalselt:
# item1 {ruudustikuala: item1; } # item2 {ruudustikuala: item2; } .grid {grid-template-areas: "..." ".. kirje1" "ese2 ese2 ese2 ese1" "" ese2 ese2 ese2. "; }
Kuidas luua tundlikku paigutust CSS Gridi abil
CSS Gridi saab kasutada meediumipäringutega erinevate ekraanisuurustega üksuste ümberkorraldamiseks ilma märgistust muutmata. Kauba kuju, suurust ja asukohta saab täielikult muuta, mis viib tõeliselt tundliku ja väga kohandatud paigutuseni.
Oletame, et meil on selle HTML-i märgistuse abil loodud elementide loend (joonis 1):
div> div> / div> div> / div> div> / div> div> / div> div> / div> div> / div> div> / div> / div>
Kasutades seda, mida oleme seni Gridi kohta õppinud, saame meediumipäringu abil rakendada stiile ekraanidele, mis on laiemad kui 720 pikslit (joonis 2):
@media (min-width: 721px) {.header {grid-area: header; } .menüü {ruudustikuala: menüü; } .kangelane {ruudustikuala: kangelane; } .main {grid-area: main; } .banner {grid-area: banner; } .extra {ruudustikuala: ekstra; } .pilt {grid-area: image; } .grid {display: grid; ruudustiku-malli-veerud: korrake (4, 1fr); ruudustiku-malli-read: 40px 2fr kordus (4, 1fr); grid-template-areas: "päise päise päise päis" "kangelase kangelase kangelase kangelane" "menüü peamine peamine peamine" "menüü peamine peamine peamine" "menüü bänneri ribariba" "menüü lisapildi pilt"; }}
Samuti saame teise meediumipäringu abil üksusi hõlpsalt ümber paigutada ja muuta suuremate ekraanide jaoks, mis on laiemad kui 1000 pikslit (joonis 3):
@media (min-width: 1001px) {.grid {grid-template-areas: "päise menüümenüü menüü" "kangelaskangelase kangelaskangelane" "kangelaskangelase kangelaskangelane" "peamine peamine. pilt" "peamine peamine. ekstra" " ribariba ribariba ribariba "; }}
See pole veel kõik - ruudustiku veergude ja ridade arvu saab soovi korral isegi teatud ekraanisuuruste jaoks lubada, määratledes uuesti ruudustik-mall-veerud ja / või ruudustik-mall-read meediaküsimustes.
CSS Gridi abil saab saavutada ka kattuvaid elemente. Mitu üksust võivad hõivata samu ruudustikurakke ja võivad seega üksteisega kattuda, kasutades z-indeks üksuste omadused, et kontrollida nende virnastamise järjekorda.
Näiteks võime lisada poolläbipaistva elemendi koos tööriistaribaga ruudustikukonteineri sisse ja asetada see kõige paremasse veergu nii, et see kattuks kõigi teiste elementidega (joonis 4):
.toolbar {grid-column: 4; ruudustiku rida: 1 / -1; läbipaistmatus:, 85; z-indeks: 1; }
Viimane aspekt, mida arutame, on veergude ja ridade või tühikute vaheline kaugus (joonis 5). Võrgus olevaid üksusi saab eraldada, kasutades ruudustik-veerg-vahe või võre-rida-vahe omadused, mis määravad vastavalt veergude ja ridade vahe. Lühikese omaduse ruudustiku vahe võib määrata mõlemad.
CSS Gridi varundused vanematele brauseritele
CSS Gridi atribuutide paigutamine mobiiliatribuutide alla tagab, et brauserid, mis endiselt võrku ei toeta, eiravad seda ja renderdavad mobiiliversiooni. Võime alternatiivina lisada põhilise varuplaani, kasutades @support, päring, mis rakendab reegleid, mis põhinevad konkreetse CSS-i funktsiooni brauseri toel. Seega saame varukujunduse seada ekraanisuurustele, mis on laiemad kui 720 pikslit:
@support not (display: grid) {@media (min-width: 721px) {.header, .extra {float: left; laius: 50%; }}}
Kui peate mingil põhjusel selle varukoopia kuvama Internet Explorer 10 ja 11 puhul, mis ei toeta võrku ega @support päringu korral saate kasutada tuntud päringut, mis rakendab stiile ainult IE10 ja 11 puhul:
@media (min-laius: 721px) ja (-ms-kõrge kontrastsus: puudub), (-ms-kõrge kontrastsus: aktiivne) {.header, .extra {float: left; laius: 50%; }}
Kui vajate IE9 ja vanemat tuge, laadige HTML-i täiendav stiilitabel asjakohaste stiilidega, kasutades järgmist:
! - [kui IE]> link rel = "stiilileht" href = "ie.css" />! [endif] ->
CSS Grid ressursid
Lisateavet ja õpetusi CSS-i võrgumooduli kohta vaadake järgmistest ressurssidest.
MDN-i veebidokumendid
Nagu alati, on Mozilla Developer Network'i veebidokumentide sait veebiarendajate ressursside jaoks suurepärane koht alustamiseks - või selle juurde tagasi pöördumiseks, sõltuvalt teie mälu tugevusest. Selle CSS Gridi paigutuslehel on selgitused kõigi Gridi omaduste kohta ning interaktiivsed näited, mida saate ise proovida.
Scrimba interaktiivne: CSS Gridi õpetus
Scrimba on interaktiivne koodikursuste platvorm. Enne õpetuse jätkamist saate videod peatada, nendes koodi redigeerida ja tulemusi näha. See on fantastiline viis kodeerimise õppimiseks ja Per Harald Borgeni tasuta 14-osaline CSS Gridi kursus sobib suurepäraselt neile, kes eelistavad videoõpetusi.
Mäng Grid Garden
Suurepärane interaktiivne viis kodeerimise õppimiseks on mängude kaudu. Grid Garden on võrgumäng, mis laseb teil porgandiaeda joota, tippides redaktorisse CSS Grid atribuudid. See on väga lõbus ja üllatavalt rahuldustpakkuv, isegi kui teie saak on ainult digitaalne.
Saidi kujundamine meeskonna osana? Teie pilvemäluteenus aitab kõigil samal lehel püsida.
See artikkel avaldati algselt aastal võrk, maailma enimmüüdud ajakiri veebidisaineritele ja -arendajatele. Osta väljaanne 309 või telli.
