Įvadas į CSS Grid Layout Module

Tai buvo vieną kartą lenteles, tada maržos ir plūdės, tada „flexbox“ ir dabar tinklelis: CSS visada nukreipė į naujus ir geresnius būdus, kaip palengvinti seną darbą kodavimo žiniatinklio maketus. The CSS tinklo schemos modelis gali sukurti ir atnaujinti išdėstymą išilgai dviejų ašių: horizontalus ir vertikalus, ir plotis, ir aukštis elementų.

Tinklelio išdėstymas nepriklauso nuo elementų padėties žymėjime, todėl galite sumaišykite elementų išdėstymą žymėjime nekeičiant išdėstymo. Tinklelio modelio tinklelio elementas yra suskirstyti į tinklelio stulpelius ir eilutes (bendrai žinomas kaip tinklelio takeliai) iki tinklelio linijos. Dabar pažiūrėkime, kaip sukurti pavyzdinį tinklelį.

Naršyklės palaikymas

Rašant šį straipsnį, CSS tinklelio modulį palaiko tik naujausia IE naršyklė ir „Edge“. CSS tinklelis yra eksperimentiniame etape kitose pagrindinėse naršyklėse, kuriose turite įjungti palaikymą rankiniu būdu:

• „Firefox“: Paspauskite Shift + F2, įveskite šią komandą į GCLI įvesties juostą, kuri atsirado naršyklės apačioje: pref set layout.css.grid.enabled tiesa.
• „Chrome“: Naršyti chrome: // vėliavos URL ir įgalinkite Eksperimentinės interneto platformos funkcijos.

Tikėtina, kad visa pagrindinė naršyklės parama atėjo iki 2017 m.

Pavyzdinis tinklelis

Į pasukite elementą į tinklelį tu gali naudoti vienas iš šių trijų ekranas savybės:

1. ekranas: tinklelis; - elementas yra konvertuojami į blokų tinklelį
2. ekranas: inline-grid; - elementas yra konvertuojama į eilutę, kurioje yra tinklelis
3. ekranas: subgrid; - jei elementas yra tinklelio elementas konvertuojama į subgridą kuri ignoruoja tinklelio šabloną ir tinklelio spragų savybes

Kaip ir lentelė susideda iš kelių stalo ląstelių, tinklelis yra sudarytas iš kelių tinklelio ląstelių. Tinklelis yra priskirti tinklelio elementų rinkiniui kuri yra bendrai žinoma kaip tinklo sritį.

Mes ketiname kurti tinklelis su penkiais skyriais (tinklelio sritimis): viršuje, apačioje, kairėje, dešinėje ir centre. HTML susideda iš penki divs konteinerio div.

 
 
Į viršų
 
Kairė
 
centras
 
Teisė
 
Apatinė
 
 

CSS, tinklo šablonų sritys nuosavybė apibrėžia tinklelį su skirtingomis tinklo sritimis. Jo vertė, eilutė žymi tinklelio eilutę ir kiekvienas eilutės pavadinimas atitinka stulpelį. Į sukurti tuščią tinklelį jums reikia naudoti taškas (.) charakteris eilutės eilutėje.

The tinklo ploto pavadinimai turi būti nuoroda į tinklo plotas atskirų tinklo elementų nuosavybė.

 .tinklelis-konteineris plotis: 500px; aukštis: 500 px; ekranas: tinklelis; „grid-template“ sritys: „top top top“ „kairysis centre dešinysis“ „apačioje apačioje“;  .grid-top grid-area: top;  .grid-bottom grid-area: bottom;  .grid-left grid area: left;  .grid-right grid-area: right;  .grid-centre grid-area: centre;  

Taigi šis kodas sukuria tinklelis su trimis eilėmis ir stulpeliais. The viršuje elementas užima erdvę, apimančią virš trys stulpeliai pirmoje eilutėje ir apačioje elementas tęsiasi trys stulpeliai paskutinėje eilutėje. Kiekvienas kairėje, centras ir teisė elementai viena stulpelis vidurinėje eilutėje.

Dabar mums reikia priskirti matmenis į šias eilutes ir stulpelius. The tinklelio šablonai ir tinklelio šablonų eilutės savybės nustatyti tinklelio kelio dydį (eilutė arba stulpelis).

 .tinklelis-konteineris plotis: 500px; aukštis: 500 px; ekranas: tinklelis; „grid-template“ sritys: „top top top“ „kairysis centre dešinysis“ „apačioje apačioje“; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px;  

Štai kaip dabar atrodo mūsų CSS tinklelis (su kai kuriais papildomais stiliais):

Tarpas tarp tinklo elementų

Galite pridėti tuščias tarpas tarp stulpelių ir eilučių naudojant tinklo stulpelio spraga ir tinklelio eilės tarpas, arba jų ilgalaikio turto tinklo atotrūkis.

 .tinklelis-konteineris plotis: 500px; aukštis: 500 px; ekranas: tinklelis; „grid-template“ sritys: „top top top“ „kairysis centre dešinysis“ „apačioje apačioje“; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px; tinklelio tarpas: 5px 5px;  

Žemiau galite pamatyti, kad tinklo atotrūkis nuosavybė papildė skirtumus tarp tinklo elementų.

Suderinkite tinklelio turinį ir elementus

The pateisina turinį tinklelio konteinerio nuosavybė (.tinklelis) suderina tinklo turinį išilgai ašies (horizontali ašis) ir nuosavybė suderinti turinį, suderina tinklelio turinį palei bloko ašį (vertikali ašis). Abi savybės gali turėti vieną iš šių verčių: pradėti, pabaiga, centras, tarpas tarp, erdvė ir tolygiai.

Jei taikoma, takelio (eilutės ar stulpelio) dydis sumažėja, kad atitiktų turinį kai suderinta. Pažvelkite į tinklelio turinio ekrano kopijas suderinti su skirtingomis vertėmis žemiau.

pateisinti turinį: pradėti;

pateisinti turinį: pabaiga;

pateisinti turinį: centras;

pateisinti turinį: tarpą tarp;

pateisinti turinį: erdvė aplink;

pateisinti turinį: tolygiai;

suderinti turinį: pradėti;

suderinti turinį: pabaiga;

suderinti turinį: centras;

lyginti turinį: tarpą tarp;

suderinti turinį: erdvė aplink;

suderinti turinį: tolygiai;

Tiek pateisina turinį ir suderinti turinį savybės suderinti visą turinį tinkle.

Į suderinti atskirus elementus jų tinklų zonose, naudoti kitos lygiavimo savybės: pateisinti elementus ir suderinti elementus. Abi gali turėti vieną iš šių reikšmių: pradėti, pabaiga, centras, pradinis (suderinkite elementus išilgai pagrindinio tinklo linijos linijos) ir ruožas (elementai užpildo visą jų plotą).