Bevezetés a CSS Grid Layout Module-be

Egyszer volt asztalok, azután margók és úszók, azután flexbox és most rács: A CSS mindig új és jobb módszerek felé irányította az öreg munkát webes elrendezések kódolása. A CSS Grid Layout Model létrehozhatja és frissítheti az elrendezést két tengely mentén: vízszintes és függőleges, mind a szélességet, mind a magasságot érinti elemeket.

A rács elrendezése nem függ a jelölés elemeinek helyzetétől, így lehet keverje el az elemek elhelyezését az elrendezés módosítása nélkül. A rácsmodellben egy rácstartály elem van oszlik rácsoszlopokra és sorokra (együttesen ismert rács számok) by rácsvonalak. Most nézzük meg, hogyan hozzon létre egy minta rácsot.

Böngésző támogatás

A cikk írása óta a CSS Grid modul csak a legújabb IE böngésző és az Edge által támogatott. A CSS Grid kísérleti szakaszban a többi nagyobb böngészőben, amelyben meg kell engedélyezze a támogatást kézzel:

• Firefox: Nyomja meg a Shift + F2 billentyűt, írja be a következő parancsot a böngésző alján megjelenő GCLI beviteli sávba: pref set layout.css.grid.enabled igaz.
• Króm: Tallózás a chrome: // flags URL-cím és engedélyezés Kísérleti webes platform funkciók.

Valószínűleg az összes fő böngésző támogatás 2017 elején / közepén érkezik.

Minta rács

Nak nek forgassa el az elemet egy rácstartályba Te tudod használni a három közül az egyik kijelző tulajdonságok:

1. kijelző: rács; - az elem átalakított blokk rácsos tartályká
2. kijelző: inline-grid; - az elem átkonvertálva egy soros rácstartályba
3. kijelző: subgrid; - ha az elem egy rácselem, akkor ez az átalakítva egy subgridre amely figyelmen kívül hagyja a rács sablont és a rácsrés tulajdonságait

Csakúgy, mint egy táblázat több asztali cellából áll, egy rács van több rácscellából áll. A rács elem rácscellákhoz rendelt amely közösen ismert rács terület.

Létre fogunk hozni egy öt részből álló rács (rácsterületek): felső, alsó, bal, jobb és középső. A HTML összetevője: öt osztó egy konténer div.

 
 
felső
 
Balra
 
központ
 
Jobb
 
Alsó
 
 

A CSS-ben a grid-template-nak ingatlan meghatározza a rácsot különböző rácsterületekkel. Értéke, egy karaktersorozat rácsvonalat jelent és a stringben minden érvényes név egy oszlopot jelent. Nak nek hozzon létre egy üres rácscellát használnia kell a pont (.) karakter egy sorban.

A rács területnevek hivatkozni kell a grid-terület az egyes rácselemek tulajdonságai.

 .rácstartály szélesség: 500px; magasság: 500px; kijelző: rács; rács-sablonterületek: "top top top" "left center right" "alsó alsó alsó";  .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;  

Szóval ez a kód létrehoz egy rács három sorral és oszlopokkal. A felső Az elem egy olyan területet foglal magában, amely áthalad három oszlop az első sorban és a alsó az elem áthalad három oszlop az utolsó sorban. Mindegyik balra, központ és jobb elemeket vesz igénybe egy oszlop a középső sorban.

Most meg kell méreteket rendeljen ezeket a sorokat és oszlopokat. A grid-template-oszlopok és grid-template-sorok tulajdonságok meghatározza a rács nyomvonalának méretét (sor vagy oszlop).

 .rácstartály szélesség: 500px; magasság: 500px; kijelző: rács; rács-sablonterületek: "top top top" "left center right" "alsó alsó alsó"; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px;  

Így néz ki most a CSS hálózatunk (néhány további stílussal):

A rácselemek közötti hely

Hozzáadhat üres hely az oszlopok és a sorok között használva rács-oszlop-rés és rács-sor-rés, vagy a hosszútávú tulajdonuk rács-rés.

 .rácstartály szélesség: 500px; magasság: 500px; kijelző: rács; rács-sablonterületek: "top top top" "left center right" "alsó alsó alsó"; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px; rács-rés: 5px 5px;  

Az alábbiakban láthatjuk, hogy a rács-rés a tulajdonjogok valójában a rácsok közötti különbségeket eredményeztek.

Igazítsa a rács tartalmát és elemeit

A indokolják-tartalom a rácstartály tulajdonsága (.rács-konténer) összehangolja a rács tartalmát az inline tengely mentén (vízszintes tengely) és az ingatlan összehangolása-tartalom, összehangolja a rács tartalmát a blokk tengely mentén (függőleges tengely). Mindkét tulajdonság ezeknek az értékeknek egyike lehet: Rajt, vég, központ, tér-között, tér-körül és tér-egyenletesen.

Adott esetben a pálya (sor vagy oszlop) mérete zsugorodik a tartalomhoz ha igazodik. Tekintse meg a rács tartalmának képernyőképeit különböző értékekkel lent.

indokolja a tartalmat: kezdet;

indokolja a tartalmat: vég;

indokolja a tartalmat: központ;

indokolja a tartalmat: térköz;

indokolja a tartalmat: space-around;

indokolja a tartalmat: tér-egyenletesen;

illesztés-tartalom: start;

tartalom igazítása: vég;

igazítás-tartalom: központ;

illesztés-tartalom: térköz;

illesztés-tartalom: space-around;

illesztés-tartalom: tér-egyenletes;

Mind a indokolják-tartalom és összehangolása-tartalom tulajdonságok illessze a teljes tartalmat a rácson belül.

Nak nek az egyes elemek összehangolása a rácsterületeken belül, használja a más igazítási tulajdonság pár: indokolják-tételek és összehangolása-tételek. Mindkettő az alábbi értékekkel rendelkezik: Rajt, vég, központ, alapvonal (illessze az elemeket a terület alaprácsvonalának mentén) és kitágít (az összes terület kitöltése).