Ievads CSS režģa izkārtojuma modulī

Tas bija vienreiz tabulas, tad robežas un pludiņi, tad flexbox un tagad režģis: CSS vienmēr virzījās uz jauniem un labākiem veidiem, kā mazināt veco darbu kodēšanas tīmekļa izkārtojumi. The CSS režģa izkārtojuma modelis var izveidot un atjaunināt izkārtojumu gar divām asīm: horizontāli un vertikāli, ietekmē gan platumu, gan augstumu elementiem.

Režģa izkārtojums nav atkarīgs no elementu stāvokļa iezīmēšanā, tādējādi jūs varat sajauciet elementu izvietojumus marķējumā, nemainot izkārtojumu. Režģa modelī ir režģa konteinera elements sadalīts režģa kolonnās un rindās (kopīgi pazīstams kā režģa ierakstus) līdz režģa līnijas. Tagad aplūkosim, kā izveidot paraugu režģi.

Pārlūka atbalsts

Rakstot šo rakstu, CSS režģa moduli atbalsta tikai jaunākā IE pārlūkprogramma un Edge. CSS režģis ir eksperimentālajā posmā citās galvenajās pārlūkprogrammās, kurās jums ir nepieciešams iespējojiet atbalstu manuāli:

• Firefox: Nospiediet Shift + F2, ievadiet šādu komandu GCLI ievades joslā, kas parādījās pārlūkprogrammas apakšā: pref set layout.css.grid.enabled taisnība.
• Chrome: Pārlūkojiet chrome: // karogi URL un iespējojiet Eksperimentālās tīmekļa platformas funkcijas.

Iespējams, ka viss galvenais pārlūkprogrammas atbalsts nāk no 2017. gada sākuma / vidus.

Parauga režģis

Uz pagrieziet elementu režģa tvertnē tu vari izmantot viens no šiem trim displejs īpašības:

1. displejs: režģis; - elements ir pārveidots par bloku režģa konteineru
2. displejs: inline-grid; - elements ir pārvērsts par iekšējo tīkla trauku
3. displejs: subgrid; - ja elements ir tīkla elements pārveidots par subgrid kas ignorē režģa veidni un režģa plaisu īpašības

Tāpat kā tabula sastāv no vairākām galda šūnām, ir režģis sastāv no vairākām režģa šūnām. Tīkla vienums ir piešķirta tīkla elementu kopai kas ir kopīgi pazīstams kā režģa zonā.

Mēs radīsim režģis ar piecām sadaļām (režģa zonām): augšā, apakšā, pa kreisi, pa labi un centru. HTML sastāv no pieci divs konteinera div.

 
 
Tops
 
Pa kreisi
 
centrs
 
Pa labi
 
Apakšā
 
 

CSS, režģa veidnes īpašums definē režģi ar dažādām tīkla zonām. Tās vērtība, virkne ir režģa rinda un katrs derīgs vārds virknē ir kolonna. Uz izveidot tukšu režģa šūnu jums ir jāizmanto dot (.) raksturs rindas virknē.

The tīkla apgabalu nosaukumi atsauces uz režģa zona atsevišķu tīkla elementu īpašums.

 .režģa konteiners platums: 500px; augstums: 500px; displejs: režģis; grid-template-areas: "augšējā augšējā augšējā daļa" "kreisais centrs labajā pusē" "apakšējā apakšējā apakšā";  .grid-top tīkla apgabals: augšā;  .grid-bottom grid-area: bottom;  .grid-left režģa laukums: pa kreisi;  .grid-right režģa zona: pa labi;  .grid-center grid-area: centre;  

Tātad šis kods rada režģis ar trim rindām un kolonnām. The tops punkts aizņem vietu, kas aptver vairāk nekā trīs slejas pirmajā rindā un apakšā postenis beidzas trīs slejas pēdējā rindā. Katrs no pa kreisi, centrs un pa labi vienumus viena sleja vidējā rindā.

Tagad mums ir nepieciešams piešķiriet izmērus uz šīm rindām un kolonnām. The režģa-veidnes kolonnas un režģa-veidnes rindas īpašības definēt režģa trases lielumu (rinda vai kolonna).

 .režģa konteiners platums: 500px; augstums: 500px; displejs: režģis; grid-template-areas: "augšējā augšējā augšējā daļa" "kreisais centrs labajā pusē" "apakšējā apakšējā apakšā"; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px;  

Šādi mūsu CSS režģis izskatās tagad (ar dažiem papildu stiliem):

Telpa starp tīkla vienībām

Jūs varat pievienot tukša vieta starp kolonnām un rindām izmantojot režģa kolonnu plaisa un režģa rindu plaisa, vai to īpašums režģa plaisa.

 .režģa konteiners platums: 500px; augstums: 500px; displejs: režģis; grid-template-areas: "augšējā augšējā augšējā daļa" "kreisais centrs labajā pusē" "apakšējā apakšējā apakšā"; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px; režģa sprauga: 5px 5px;  

Zemāk jūs varat redzēt, ka režģa plaisa īpašums patiešām ir radījis atšķirības starp tīkla punktiem.

Izlīdziniet tīkla saturu un vienumus

The pamato saturu režģa konteinera īpašums (.režģa konteiners) saskaņo tīkla saturu gar iekšējo asi (horizontālā ass) un īpašums saskaņot saturu, saskaņo režģa saturu gar bloka asi (vertikālā ass). Abas īpašības var būt viena no šīm vērtībām: sākt, beigas, centrs, atstarpes, kosmosa apkārt un vienmērīgi.

Attiecīgā gadījumā trases (rindas vai kolonnas) lielums samazinās, lai tas atbilstu saturam kad tas ir saskaņots. Apskatiet režģa satura ekrānšāviņus jāsaskaņo ar dažādām vērtībām zemāk.

pamatot saturu: sākums;

pamatot saturu: beigas;

pamatot saturu: centrs;

pamatot saturu: starpība;

pamatot saturu: kosmosu;

pamatot saturu: vienmērīgi;

saskaņot saturu: sākt;

saskaņot saturu: beigas;

saskaņot saturu: centrs;

saskaņot saturu: atstarpi;

saskaņot saturu: kosmosa apkārt;

saskaņot saturu: vienmērīgi;

Gan pamato saturu un saskaņot saturu īpašības saskaņot visu saturu tīklā.

Uz saskaņot atsevišķus vienumus to tīkla zonās, izmantot cits pielīdzināšanas īpašību pāris: pamato-preces un saskaņot vienumus. Abām var būt viena no šīm vērtībām: sākt, beigas, centrs, sākumpunkts (Izlīdziniet vienumus pa apgabala pamatgrupas līniju) un stiept (vienumi aizpilda visu laukumu).