Õppige CSS Gridi 5 minutiga - õpetus algajatele

Võrgustiku paigutused on veebisaitide kujundamisel üliolulised ning CSS-i võrgu moodul on selle loomiseks kõige võimsam ja lihtsam tööriist. Ma arvan isiklikult, et see on palju parem kui näiteks Bootstrap (loe miks siit).

Moodul on saanud loomuliku toe ka suuremate brauserite poolt (Safari, Chrome, Firefox, Edge), seega usun, et kõik esiotsa arendajad peavad seda tehnoloogiat õppima mitte liiga kauges tulevikus.

Selles artiklis tutvustan teid võimalikult kiiresti CSS Gridi põhitõdedest. Jätan välja kõik, millest te ei peaks hoolima, kuni olete põhitõdedest aru saanud.

Olen loonud ka tasuta CSS Gridi kursuse. Täieliku juurdepääsu saamiseks klõpsake siin

seda.

Teise võimalusena vaadake seda artiklit, mis selgitab, mida saate kogu kursuse jooksul õppida:

Hüppame nüüd sellesse!

Teie esimene ruudustiku paigutus

CSS-võrgu kaks põhikomponenti on ümbris (vanem) ja

esemed (lapsed). Mähis on tegelik ruudustik ja üksused on ruudustiku sisuks.

Siin on pakendi märgistus, milles on kuus eset:

 1 2 3 4 5 6 

Sisselülitamiseks meie ümbris divviiakse grid , me lihtsalt anda see väljapaneku

grid:

Kuid see ei tee veel midagi, kuna me pole määratlenud, kuidas me tahame, et meie võrk välja näeks. See ladub lihtsalt 6 div'süksteise otsa.

Olen lisanud natuke stiili, kuid sellel pole CSS-võrguga midagi pistmist.

Veerud ja read

Kahemõõtmeliseks muutmiseks peame määratlema veerud ja read. Loome kolm veergu ja kaks rida. Kasutame grid-template-rowja grid-template-columnatribuute.

Kui oleme kolm väärtust kirjutanud grid-template-columns, saame kolm veergu. Saame kaks rida, kuna oleme väärtusele kaks väärtust määranud grid-template-rows.

Väärtused dikteerivad, kui laiad me tahame, et meie veerud oleksid (100 pikslit) ja kui pikad me tahaksime, et meie read oleksid (50 pikslit). Siin on tulemus:

Veendumaks, et mõistate väärtuste ja ruudustiku suhet õigesti, vaadake ka seda näidet.

.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 50px 50px; } 

Proovige aru saada koodi ja paigutuse vahelisest seosest.

See mängib välja nii:

Esemete paigutamine

Järgmine asi, mida peate õppima, on üksuste paigutamine ruudustikule. Siit saate supervõimed, kuna see muudab paigutuste loomise surmtõsiseks.

Loome 3x3 ruudustiku, kasutades sama märgistust nagu varem.

.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } 

Selle tulemuseks on järgmine paigutus:

Pange tähele, et lehel näeme ainult 3x2 ruudustikku, samas kui määratlesime selle 3x3 ruudustikuna. Seda seetõttu, et meil on võrgu täitmiseks ainult kuus eset. Kui meil oleks veel kolm, siis täidetaks ka kõige madalam rida.

Üksuste positsioneerimiseks ja suuruse muutmiseks suuname need ning kasutame funktsioone grid-columnja grid-row.

.item1 { grid-column-start: 1; grid-column-end: 4; } 

Mida me siin ütleme, on see, et me tahame, et element1 algaks esimesel ruudustiku real ja lõppeks neljanda veeru real. Teisisõnu, see võtab kogu rea.

Siit saate teada, kuidas see ekraanil kuvatakse:

Kas olete segaduses, miks meil on 4 veerurida, kui meil on ainult 3 veergu? Vaadake seda pilti, kuhu olen veerujooned mustalt joonistanud:

Pange tähele, et me kasutame nüüd kõiki ruudustiku ridu. Kui panime esimese eseme kogu esimese rea üles võtma, lükkas see ülejäänud esemed alla.

Lõpuks tahaksin näidata lihtsamat viisi ülaltoodud süntaksi kirjutamiseks:

Veendumaks, et olete sellest mõistest õigesti aru saanud, korraldame üksused veidi ümber.

.item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } 

Nii näeb see lehel välja. Proovige pea ümber keerata, miks see välja näeb. See ei tohiks olla liiga raske.

Ja see oligi kõik!

Täname lugemast! Minu nimi on Per Borgen, olen Scrimba asutaja - lihtsaim viis kodeerimise õppimiseks. Kui soovite õppida kaasaegse veebisaidi loomist professionaalsel tasemel, peaksite tutvuma meie reageeriva veebidisaini alglaadimisega.