CSS Grid Layout Module'i tutvustus

See oli üks kord tabelid, siis marginaalid ja ujuvad, siis flexbox ja nüüd võrku: CSS juhtis alati uusi ja paremaid viise, kuidas leevendada vananevat tööd kodeerida veebipõhiseid paigutusi. The CSS-võrgukujundusmudel saab luua ja värskendada paigutust piki kahte telge: horisontaalne ja vertikaalne, mõjutavad nii laiust kui ka kõrgust elemente.

Võrgu paigutus ei sõltu elementide positsioonist märgistuses, seega saate segage elementide paigutusi märgistuses, muutmata paigutust. Võrgustiku mudelis on võrgukonteineri element jaotatud ruudukujulisteks veergudeks ja ridadeks (ühiselt tuntud kui ruutrajad) kõrval ruudustikku. Nüüd vaatame, kuidas luua proovivõrgustik.

Brauseri tugi

Selle artikli kirjutamise ajal toetab CSS Grid moodulit ainult viimane IE brauser ja Edge. CSS Grid on katselises etapis teistes peamistes brauserites, kus te peate lubage toetus käsitsi:

• Firefox: Vajutage Shift + F2, sisestage järgmine käsk brauseri allosas ilmunud GCLI sisendribale: pref set layout.css.grid.enabled true.
• Chrome: Sirvi chrome: // lipud URL ja lubage Eksperimentaalsed veebiplatvormi funktsioonid.

Kõik peamised brauseri toetused on tõenäoliselt tulevad varakult / 2017. aasta keskpaigaks.

Proovivõrk

Et pöörake element võrgukonteinerisse sa võid kasutada üks neist kolmest kuva omadused:

1. kuva: võrk; - element on teisendatakse ruudustikuks
2. kuva: inline-grid; - element on teisendatakse ruudukujuliseks võrgukonteineriks
3. kuva: subgrid; - kui element on võrguseade, siis see on teisendatakse subgridiks mis ignoreerib võrgumallit ja võrgupilu omadusi

Nii nagu tabel koosneb mitmest tabelist, on võrk koosneb mitmest võrgurakust. Võrguüksus on määratud võrgurakkude kogumile mis on ühiselt tuntud kui võrgupiirkonnas.

Me loome viie sektsiooniga võrk (võrgupiirkonnad): ülemine, alumine, vasak, parem ja keskel. HTML koosneb viis divs konteineri div.

 
 
Üles
 
Vasak
 
Keskus
 
Õige
 
Alumine
 
 

CSS-is grid-mall-alad vara määratleb võrku, millel on erinevad võrgupiirkonnad. Oma väärtuses, string tähistab ruudustikku ja iga stringil olev kehtiv nimi tähistab veergu. Et luua tühi võrgurakett peate kasutama dot (.) iseloom reast.

The võrgupiirkonna nimed millele viidatakse võrgupiirkond üksikute võrgupunktide vara.

 .võrgukonteiner laius: 500 px; kõrgus: 500 px; kuva: võrk; grid-template-valdkonnad: "top top top" "vasakpoolne parem parempoolne" "alt alt";  .grid-top grid-area: top;  .grid-bottom grid-area: bottom;  .grid-left grid-area: left;  .grid-right grid-area: right;  .grid-center grid-area: center;  

Nii see kood loob kolm rida ja veergu sisaldav võrk. The top üksus võtab üle ala, mis ulatub üle kolm veergu esimeses reas ja põhja üksus ulatub üle kolm veergu viimases reas. Igaüks neist vasakule, Keskus ja õigus üksused võetakse üks veerg keskmises reas.

Nüüd peame määrake mõõtmed nendele ridadele ja veergudele. The grid-malli-veerud ja ruudustik-rida omadused määrake võrguraja suurus (rida või veerg).

 .võrgukonteiner laius: 500 px; kõrgus: 500 px; kuva: võrk; grid-template-valdkonnad: "top top top" "vasakpoolne parem parempoolne" "alt alt"; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px;  

Nii näeb meie CSS-võrk nüüd välja (koos mõne täiendava stiiliga):

Võrguüksuste vaheline ruum

Saate lisada tühi ruum veergude ja ridade vahel kasutades ruudukujulise pilu vahe ja ruudukujulise pilu, või nende pikaajaline vara võrgu-vahe.

 .võrgukonteiner laius: 500 px; kõrgus: 500 px; kuva: võrk; grid-template-valdkonnad: "top top top" "vasakpoolne parem parempoolne" "alt alt"; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px; võrgupuudus: 5 px 5px;  

Allpool on näha, et võrgu-vahe kinnisvara lisab tõepoolest puudusi võrgupunktide vahel.

Joondage võrgu sisu ja üksused

The õigustada sisu ruudukonteineri vara (.võrgukonteiner) joondab võrgu sisu piki inline-telge (horisontaaltelg) ja vara joondage sisu, joondab võrgu sisu piki ploki telge (vertikaaltelg). Mõlemad omadused võib olla üks neist väärtustest: alustada, lõpp, Keskus, vahepeal, ruumi ümber ja ruumi ühtlaselt.

Vajaduse korral raja (rea või veeru) suurus kahaneb, et see sobiks sisuga joondamisel. Vaadake võrgusisu ekraanipilte erinevate väärtustega allpool.

õigustada sisu: algus;

õigustada sisu: lõpp;

õigustada sisu: keskus;

õigustada sisu: ruumi-vahel;

õigustada sisu: ruumi ümber;

õigustada sisu: ruumi ühtlaselt;

vastavusse viimine: algus;

sisu joondamine: lõpp;

sisu joondamine: keskus;

sisu joondamine: vahepealne;

sisu vastavusse viimine: space-around;

vastavusse viimine: ruumi ühtlaselt;

Mõlemad õigustada sisu ja joondage sisu omadused viia kogu sisu võrku.

Et üksikute üksuste vastavusse viimine oma võrgupiirkondades, kasuta muu joondusomaduste paar: õigustada punkte ja joondamine. Mõlemal võib olla üks neist väärtustest: alustada, lõpp, Keskus, lähtejoont (Joondage elemendid piirkonna alusvõrgu real) ja venitada (üksused täidavad kogu oma ala).