Introducere în structura rețelei CSS cu exemple

Ce veți crea

În acest tutorial, voi acoperi elementele de bază ale layout-ului rețelei CSS cu scenarii de exemplu. CSS Grid este susținută de aproape toate browserele moderne acum și este gata să fie utilizată în producție. Spre deosebire de alte metode de layout, cum ar fi flexbox, aspectul grilei vă oferă două grade de libertate, ceea ce îl face atât de versatilă încât poziționarea elementelor este doar o briză.

Structura HTML pentru aspectul rețelei CSS

Pentru a utiliza aspectul CSS Grid, elementele dvs. HTML ar trebui să aibă o structură specifică.

Trebuie să înfășurați elementele pe care doriți să le controlați într-un container părinte DIV.

Să adăugăm un stil pentru DIV-urile noastre, astfel încât să le putem distinge cu ușurință.

De asemenea, setați afișare: grilă în tine învelitoare DIV, astfel încât să putem începe să folosim aspectul rețelei.

.înveliș> div fundal-culoare: portocaliu; frontieră: 1px solid negru;  .wrapper> div: nth-copil (nui adevărat) background-color: indianred;  .wrapper display: grid

Din acest punct, tot stilul va intra în învelitoare DIV. Dacă vreodată vrem să controlam DIV-urile copilului în orice moment, atunci vom adăuga reguli de stil specifice grid-ului pentru copilul DIV specific.

Reguli privind DIV părinte

Primele lucruri pe care trebuie să le învățăm despre aspectul rețelei sunt grilă matriță coloane și grid-șablon rânduri. Aceste două reguli controlează, în principiu, modul în care este modelată rețeaua dvs..

Valoarea acestor reguli poate fi o lungime, un procent sau o fracțiune din spațiul liber din rețea. De asemenea, puteți seta orice valoare auto, care umple spațiul rămas.

Să vedem câteva exemple de mai jos.

Grilă-șablon-coloane & grilă-șablon-rânduri

grilă matriță coloane

.înveliș display: grilă; grilă-șablon-coloane: 100px 100px 100px

.înveliș display: grilă; grilă-șablon-coloane: 100px auto 100px

.înveliș display: grilă; grilă-șablon-coloane: 1fr 1fr 1fr 1fr;

grilă-șablon-coloane & grilă-șablon-rânduri

Să începem să construim o rețea reală, în care avem controlul asupra coloanelor și a rândurilor.

.înveliș display: grilă; grilă-șablon-coloane: 1fr 1fr; grilă-șablon-rânduri: 50px 50px;

.înveliș display: grilă; grilă-șablon-coloane: 100px 20px 250px; grilă-șablon-rânduri: 150px 40px;

Aici am adăugat încă două copii DIV pentru copii în HTML pentru același CSS.

Repetați un model de șablon de rețea

Dacă aveți un model repetat pentru grid-șablon,puteți folosi repetat și spuneți câte ori să repetați același model.

De exemplu, spuneți că aveți 12 elemente și doriți să le așezați pe orizontală cu aceeași lățime. Puteti repeta 1fr De 12 ori înăuntru grilă matriță coloane, care nu este eficientă. Deci, în schimb, puteți folosi repetați (12, 1fr).

.înveliș display: grilă; grilă-șablon-coloane: repetați (12, 1fr)

De asemenea, puteți repeta un model.

.înveliș display: grilă; grilă-șablon-coloane: repeat (4, 1fr 5fr 10fr);

Grilă-coloane automate și grilă-auto-rânduri

Această regulă vă ajută să setați lățimea și înălțimea celulelor rețelei.

Dacă nu setați această regulă, rândurile și coloanele rețelei se vor extinde cu conținutul.

.înveliș display: grilă; grilă-șablon-coloane: repeat (4, 1fr); grilă-auto-rânduri: 100px;

.înveliș display: grilă; grilă-șablon-coloane: repeat (4, 1fr); grilă-auto-rânduri: 20px 80px;

O caracteristică plăcută de utilizat grid-auto regula este minim maxim funcţie.

Pur și simplu setați dimensiunea minimă ca primul parametru și maximul ca al doilea parametru. Dacă ați setat auto pentru al doilea parametru, obțineți o dimensiune de celule receptivă.

.înveliș display: grilă; grilă-șablon-coloane: repeat (4, 1fr); grilă-rânduri automate: minmax (50px, auto)

Mai jos vedeți două diferite conținuturi DIV cu aceleași reguli CSS.

Grid-gap

După cum sugerează și numele, această regulă creează un decalaj între celulele rețelei.

Dacă utilizați grilă-decalaj: 5 pixeli, veți obține o diferență de 5px între fiecare celulă. Alternativ, puteți seta doar golurile rândului sau coloanei, cu grilă-decalaj: 5px și grilă-coloană-decalaj: 5 pixeli respectiv.

.înveliș display: grilă; grilă-șablon-coloane: repeat (4, 1fr); grilă-auto-rânduri: minmax (50px, auto); grilă-decalaj: 5 pixeli;

Reguli privind DIV pentru copii

Până acum, ne-am concentrat doar asupra formei grilei și a elementelor care tocmai au intrat în rețea. Acum vom învăța cum să controlam fiecare element individual.

Pentru a poziționa elementele, folosim liniile de referință ca referință. Mai jos vedeți liniile rândului și coloanelor în negru și respectiv portocaliu pentru o grilă 2x4.

Vom folosi grilă coloană și grilă rând norme cu numere de linie pentru a poziționa elementele.

De exemplu, dacă am setat grilă-coloană: 1/3 pentru primul copil div, va folosi primele două celule din rețea.

Luați în considerare HTML și CSS de mai jos:

.înveliș display: grilă; grilă-șablon-coloane: repeat (4, 1fr); grilă-auto-rânduri: 100px; grilă-decalaj: 5 pixeli;

Avem patru coloane cu dimensiuni egale și opt elemente în învelitoare DIV.

 .div1 grid-coloană: 1/3;

 .div1 grid-coloană: 1/3; grilă-rând: 1/3;

De asemenea, puteți combina aceste două reguli într-o singură regulă, aria grilă: rândul Start / coloana Start / rândul de ieșire / coloanaEnd.

 .div1 zona grilă: 2/2/3/4;

Așa cum este ilustrat în exemplul de mai sus, elementele nu sunt legate de structura HTML. Observați cum se repoziționează primul element cu grid-area regulă.

Suprafața de rețea și zonele șablonului de rețea

Puteți să numiți fiecare element copil și să folosiți aceste nume pentru a vă crea grila. Acest lucru este cu adevărat puternic și face ca aspectul să devină mai intuitiv.

Deci, definim un DIV pentru fiecare element pe care intenționăm să îl plasăm în sistemul nostru de rețea.

Am de gând să am un antet, leftColumn, rightColumn, middleTop, middleBottom și un subsol.

Deci, în HTML-ul meu am nevoie de multe DIV-uri pentru copii. Numele de clase poate fi orice.

 Antet
 LeftCol
 RightCol
 midTop
 midBottom
 Subsol

Apoi, în interiorul CSS-ului meu, am setat grid-area nume. Aceste nume pot fi orice; acestea nu ar trebui să se potrivească cu numele claselor.

.header aripa: antet; fundal-culoare: LightSeaGreen;  .leftCol zonă grilă: leftCol; fundal-culoare: portocaliu;  .rightCol zona grilă: rightCol; fundal-culoare: albastru deschis;  .midTop zona grid-ului: midTop; culoarea de fundal: lumină deschisă;  .midBottom zona grilă: midBottom; fundal-culoare: roz;  .footer grid-area: footer; fundal-culoare: verde deschis;

Apoi, în interiorul meu învelitoare DIV, folosesc grid-șablon-zone să definească aceste elemente prin referirea la numele lor definite.

Observați că am o grilă de 4x4.

.înveliș display: grilă; grilă-șablon-coloane: 1fr 4fr 4fr 1fr; grilă-șablon-rânduri: 50px 100px 100px 30px; grid-template-areas: "antet header antet header" "leftCol midTop midTop rightCol" "leftCol midBottom midBottom rightCol" "footer subsol subsol subsol"; grilă-decalaj: 5 pixeli;

Dacă, de exemplu, vreau ca subsolul să ia doar două coloane și să fie centrat, atunci pur și simplu înlocuiesc prima și ultima apariție a subsol cu un punct (.) în grid-șablon-zone.

.înveliș display: grilă; grilă-șablon-coloane: 1fr 4fr 4fr 1fr; grilă-șablon-rânduri: 50px 100px 100px 30px; grid-template-areas: "antet header antetul header" "leftCol midTop midTop rightCol" "leftCol midBottom midBottom rightCol" "footer footer."; grilă-decalaj: 5 pixeli;

Concluzie

CSS Grid are multe reguli și am acoperit doar cele mai utile din acest tutorial. Încă puteți săpeți în Documente Web MDN sau în orice altă sursă pentru lista completă a proprietăților și funcțiilor rețelei.

Cod