CSS Grid Layout -moduulin esittely

Se oli kerran taulukot, sitten marginaalit ja kelluvat, sitten flexboxiin ja nyt ruudukko: CSS ohjasi aina uusia ja parempia tapoja helpottaa ikivanhaa työtä Web-asettelujen koodaus. CSS Grid Layout Model voi luoda ja päivittää asettelun pitkin kahta akselia: vaaka ja pystysuora, vaikuttavat sekä leveyttä että korkeutta elementtejä.

Ruudukon asettelu ei riipu merkinnän elementtien sijainnista, joten voit sekoita elementtien sijoittelua merkinnässä muuttamatta ulkoasua. Ruudukon mallissa ruudukon säiliöelementti on jaettu ruudukon sarakkeisiin ja riveihin (yhteisesti tunnetaan nimellä ruudukon kappaleita) mennessä ruudukkoviivat. Katsotaanpa nyt luo näytteen ruudukko.

Selaimen tuki

Tämän artikkelin kirjoittamisen jälkeen CSS Grid -moduulia tukee vain uusin IE-selain ja Edge. CSS Grid on kokeellisessa vaiheessa muissa tärkeissä selaimissa, joissa sinun täytyy ota tuki käyttöön manuaalisesti:

• Firefox: Paina Shift + F2, kirjoita seuraava komento osaksi selaimen alaosassa näkyvää GCLI-tulopalkkia: pref set layout.css.grid.enabled true.
• Kromi: Selaa chrome: // liput URL-osoite ja ota käyttöön Kokeelliset Web Platform -ominaisuudet.

Kaikkien tärkeimpien selainten tuki on todennäköisesti tulevat vuoden 2017 alussa / puolivälissä.

Näytteen ruudukko

jotta käännä elementti ruudukkoon voit käyttää yksi näistä kolmesta näyttö ominaisuudet:

1. näyttö: ruudukko; - elementti on muunnetaan lohkon ruudukon säiliöksi
2. näyttö: inline-grid; - elementti on muunnetaan riviliittymään
3. näyttö: subgrid; - jos elementti on ruudukko, se on muunnettu subgridiksi joka ohittaa ruudukon mallin ja ruudukon aukon ominaisuudet

Aivan kuten taulukko koostuu useista taulukon soluista, ruudukko on koostuu useista ristikkosoluista. Ruudukko on määritetty ruudukon soluihin joka tunnetaan yhteisesti nimellä verkkoalueella.

Aiomme luoda ruudukko, jossa on viisi osaa (ruudukon alueet): ylhäältä, alhaalta, vasemmalta, oikealta ja keskeltä. HTML koostuu viisi divia kontin div.

 
 
ylin
 
vasen
 
keskusta
 
oikea
 
pohja
 
 

CSS: ssä grid-template-alueilla omaisuus määrittelee ruudukon, jossa on erilaiset verkkoalueet. Sen arvossa, merkkijono edustaa ruudukkoa ja jokainen kelvollinen nimi merkkijonossa edustaa saraketta. jotta luo tyhjä ruudukko sinun täytyy käyttää piste (.) luonne rivijonon sisällä.

verkkoalueen nimet on viitattava grid-alue yksittäisten ruudukon kohteiden omaisuutta.

 .ristikko-säiliö leveys: 500px; korkeus: 500px; näyttö: ruudukko; grid-template-alueet: "top top top" "vasen keskimmäinen oikea" "alareunan alareuna";  .grid-top grid-area: top;  .grid-bottom ruudukko: pohja;  .grid-left grid-area: left;  .grid-right ruudukko: oikea;  .grid-center grid-area: center;  

Joten tämä koodi luo ruudukko, jossa on kolme riviä ja sarakkeita. ylin kohde vie alueen, joka ulottuu yli kolme saraketta ensimmäisessä rivissä ja pohja kohde ulottuu yli kolme saraketta viimeisessä rivissä. Jokainen vasen, keskusta ja oikea kohteita yksi sarake keskirivillä.

Nyt meidän täytyy määritä mitat näihin riveihin ja sarakkeisiin. grid-template-pylväät ja grid-template-rivinen ominaisuudet määrittää ruudukon raidan koon (rivi tai sarake).

 .ristikko-säiliö leveys: 500px; korkeus: 500px; näyttö: ruudukko; grid-template-alueet: "top top top" "vasen keskimmäinen oikea" "alareunan alareuna"; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px;  

Näin CSS-verkostomme näyttää nyt (joidenkin lisätyylien avulla):

Ruudukkoelementtien välinen tila

Voit lisätä tyhjä tila sarakkeiden ja rivien välillä käyttämällä grid-sarake-aukko ja grid-rivi-aukko, tai niiden pitkäikäinen omaisuus grid-aukko.

 .ristikko-säiliö leveys: 500px; korkeus: 500px; näyttö: ruudukko; grid-template-alueet: "top top top" "vasen keskimmäinen oikea" "alareunan alareuna"; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px; ruudukko: 5px 5px;  

Alla näet, että grid-aukko omaisuus lisäsi todellisuudessa verkon eroja.

Kohdista ruudukon sisältö ja kohteet

tasattu sisältöä ruudukon säiliön ominaisuus (.grid-kontti) sovittaa ruudukon sisällön akselin suuntaisesti (vaakasuora akseli) ja omaisuutta kohdista-pitoisuus, tasoittaa ruudukon sisältöä lohkoakselia pitkin (pystyakseli). Molemmat ominaisuudet voi olla yksi näistä arvoista: alkaa, pää, keskusta, tila-välillä, tilaa ympärillä ja tilaa tasaisesti.

Tarvittaessa raita (rivi tai sarake) kutistuu sisällön mukaan kun se on linjassa. Katsokaa ruudukon sisällön kuvakaappauksia eri arvojen kanssa alla.

perustella sisältö: alku;

perustella sisältö: loppu;

perustella sisältö: keskus;

perustella sisältö: välilyönti;

perustella sisältö: space-around;

perustella sisältö: tilaa tasaisesti;

tasata sisältö: alku;

tasata sisältö: loppu;

tasata sisältö: keskus;

tasata sisältö: välilyönti;

tasata sisältö: space-around;

tasata sisältö: tilaa tasaisesti;

Molemmat tasattu sisältöä ja kohdista-pitoisuus ominaisuudet Tasaa koko sisältö ruudukon sisällä.

jotta sovittaa yksittäiset kohteet ruudukon alueilleen, Käytä muut kohdistusparit: tasattu kohdetta ja ALIGN-kohdetta. Molemmilla voi olla jokin näistä arvoista: alkaa, pää, keskusta, lähtötilanteessa (kohdista kohteet alueen perusverkkoa pitkin) ja venyttää (kohteet täyttävät koko alueensa).