Introducere în modulul CSS Grid Layout

A fost o dată Mese, atunci marjele și flotoarele, atunci flexbox si acum grilă: CSS a fost întotdeauna îndrumat spre noi și mai bune modalități de a ușura vechiul serviciu de vârstă codarea layout-urilor web. Modul CSS de configurare a rețelei poate crea și actualiza aspectul de-a lungul a două axe: orizontală și verticală, afectând atât lățimea cât și înălțimea de elemente.

Amplasarea rețelei nu depinde de poziția elementelor din marcaj, prin urmare, puteți amestecați destinațiile de plasare a elementelor în marcare fără modificarea aspectului. În modelul grilei, este un element container al grilei împărțit în coloane și rânduri (denumite colectiv grilă) de linii de rețea. Acum să vedem cum să creați o rețea de eșantioane.

Suport pentru browser

De la scrierea acestui articol, modulul Grid Grid CSS este suportat numai de cel mai recent browser de IE și Edge. Gridul CSS este în stadiul experimental în celelalte browsere majore în care trebuie activați manual suportul:

• Firefox: Apăsați Shift + F2, introduceți următoarea comandă în bara de intrare GCLI care a apărut în partea de jos a browserului: setul pref set layout.css.grid.enabled true.
• Crom: Răsfoiți chrome: // flags URL și activare Funcțiile platformei Web experimentale.

Este posibil ca majoritatea suportului pentru browser-ul principal vin la începutul / mijlocul anului 2017.

O grilă de probă

La transforma un element într-un container de rețea poți să folosești una dintre aceste trei afişa proprietăţi:

1. afișare: grilă; - elementul este transformat într-un container cu grilă bloc
2. afișare: grilă inline; - elementul este transformat într-un container din rețea
3. afișare: subgrida; - dacă elementul este un element de rețea este convertit într-o subgridă care ignoră șabloanele rețelei și proprietățile la grilă

La fel cum un tabel este alcătuit din mai multe celule de masă, este o rețea compusă din mai multe celule ale rețelei. Un element de rețea este alocat unui set de celule de rețea care este colectiv cunoscut sub numele de grilă.

Vom crea o rețea cu cinci secțiuni (zone de rețea): sus, jos, stânga, dreapta și centru. HTML constă din cinci divuri în interiorul unui container div.

 
 
Top
 
Stânga
 
centru
 
Dreapta
 
Fund
 
 

În CSS, grid-șablon-zone proprietate definește o rețea cu zone de rețea diferite. În valoarea sa, un șir reprezintă un rând de grilă și fiecare nume valid într-un șir reprezintă o coloană. La creați o celulă grilă goală trebuie să utilizați punct (.) caracter într-un șir de șir.

numele zonelor de rețea trebuie să fie menționate de către grid-area proprietății elementelor de rețea individuale.

 .grilă-container width: 500px; înălțime: 500px; afișare: grilă; grilă-șablon-zone: "sus sus sus" "stânga centru dreapta" "partea de jos partea de jos";  .grid-top zona grilă: partea de sus;  .grid-jos zona grilă: partea inferioară;  .grid-stânga zona grilă: stânga; . grilă-dreapta zona grilă: dreapta; . centru-centru zona grilă: centru;  

Deci acest cod creează o grilă cu trei rânduri și coloane. top element ocupă o zonă care se întinde peste trei coloane din primul rând si fund elementul se extinde trei coloane din ultimul rând. Fiecare din stânga, centru și dreapta articolele iau o coloană în rândul din mijloc.

Acum avem nevoie atribuiți dimensiuni la aceste rânduri și coloane. grilă matriță coloane și grid-șablon rânduri proprietăţi definiți mărimea traseului grilei (rând sau coloană).

 .grilă-container width: 500px; înălțime: 500px; afișare: grilă; grilă-șablon-zone: "sus sus sus" "stânga centru dreapta" "partea de jos partea de jos"; grilă-șablon-coloane: 100px auto 100px; grilă-șablon-rânduri: 50px auto 150px;  

Așa arată acum grila noastră CSS (cu unele stiluri suplimentare):

Spațiu între elementele de rețea

Poti sa adaugi spațiu liber între coloane și rânduri utilizând grilă coloană-gap și grid-rând-gap, sau proprietatea lor lungă grid-gap.

 .grilă-container width: 500px; înălțime: 500px; afișare: grilă; grilă-șablon-zone: "sus sus sus" "stânga centru dreapta" "partea de jos partea de jos"; grilă-șablon-coloane: 100px auto 100px; grilă-șablon-rânduri: 50px auto 150px; grilă-decalaj: 5px 5px;  

Mai jos puteți vedea că grid-gap proprietatea a adăugat lacune între elementele rețelei într-adevăr.

Aliniați conținutul și elementele grilei

justifică conținut proprietatea containerului de rețea (.grid-container) aliniază conținutul rețelei de-a lungul axei inline (axa orizontală) și proprietatea alinia conținut, aliniază conținutul unei rețele de-a lungul axei blocului (axa verticală). Ambele proprietăți poate avea una dintre aceste valori: start, Sfârșit, centru, spațiu între, spațiu-în jurul valorii de și spațiu uniform.

Unde este cazul, dimensiunea piesei (rând sau coloană) se micșorează pentru a se potrivi conținutului atunci când este aliniat. Uitați-vă la capturile de ecran ale conținutului rețelei aliniate la valori diferite de mai jos.

justify-content: start;

justify-content: end;

justify-content: centru;

justify-content: spațiu-între;

justify-content: spațiu-în jurul;

justify-content: spațiu-uniform;

aliniere-conținut: începe;

aliniere-conținut: sfârșit;

aliniere-conținut: centru;

aliniere: spațiu între;

aliniere-conținut: spațiu-în jurul;

aliniere: spațiu-egal;

Amandoua justifică conținut și alinia conținut proprietăţi aliniați întregul conținut într-o rețea.

La alinierea elementelor individuale în zonele lor de rețea, folosește altă pereche de proprietăți de aliniere: justifică-elemente și aliniați-elemente. Ambele pot avea una dintre aceste valori: start, Sfârșit, centru, de bază (aliniați elemente de-a lungul liniei de bază a zonei) și întinde (elementele completează întreaga lor zonă).