Aflați cum să utilizați grilele CSS pentru a construi layout-uri complexe cu ușurință.

Poziționarea elementelor pe o pagină web poate fi foarte complicată atunci când lucrați cu machete complexe. Aici este utilă grila CSS. Este un sistem de layout conceput pentru a simplifica procesul de creare a layout-urilor complexe.

Cum te ajută? Spre deosebire de metodele tradiționale de aspect care vă permit să poziționați elementele fie în rânduri, fie în coloane, grila CSS vă oferă tot ce este mai bun din ambele lumi - o abordare 2D folosind rânduri și coloane.

Containere și Articole Grid

Puteți aplica proprietățile grilei CSS la două tipuri principale de elemente: părinte și copii. Când setați proprietatea de afișare la „grid” pentru un element părinte, acesta transformă acel element într-un container grilă. Orice element copil din acest container grilă devine un element grilă, moștenind proprietățile grilei aplicate.

Iată cum este reprezentat:

Un element grilă poate deveni și un container grilă. Acum vă puteți referi la aspect ca o grilă imbricată - o grilă în cadrul unei grile. Containerul principal al grilei este acum denumit grilă exterioară, în timp ce containerul cu element transformat în grilă devine o grilă interioară.

instagram viewer

Fiecare dintre aceste grile funcționează independent de cealaltă, ceea ce înseamnă că proprietățile setate pentru o grilă interioară nu afectează aspectul grilei exterioare și invers.

Iată cum arată:

Stăpânirea relației dintre containerele grilă și articole este esențială pentru construirea de planuri bidimensionale în mod eficient.

Rețineți că există proprietăți grile pentru containerele grilă, în timp ce altele sunt pentru elementele grilă.

Grid Lines and Tracks

Înainte de a începe să utilizați grila CSS, există doi termeni cheie cu care ar trebui să vă familiarizați:

  1. Liniile de grilă: Liniile de grilă se referă la liniile orizontale și verticale care formează grila într-un aspect de grilă CSS. Acestea specifică punctele de început și de sfârșit ale rândurilor și coloanelor, ajutând la organizarea unde merg lucrurile pe grilă. Aceste linii sunt ca marginile cutiilor; au numere care te ajută să faci referire la elemente la poziționare. Aici linia roșie întreruptă le reprezintă:
  2. Urme de grilă: sunt golurile dintre liniile de grilă care definesc rândurile și coloanele. Ele sunt ca elementele de bază ale aspectului grilei. În imaginea de mai sus, zona colorată din cadrul fiecărui element reprezintă traseul grilei.

Gândiți-vă la liniile și pistele grilei ca elementele de bază ale unui aspect al grilei, ca liniile de pe o foaie de hârtie milimetrată. Când o linie de grilă orizontală se intersectează cu o linie de grilă verticală, formează o celulă în formă de cutie. Aceste celule acționează ca containere în care puteți plasa elementele din grilă.

Proprietăți ale containerului grilă CSS

Acestea sunt proprietăți pe care le puteți aplica containerului grilă pentru a organiza aspectul și pentru a ajuta la poziționarea elementelor în interiorul acestuia. După cum am menționat mai devreme, una dintre ele este proprietatea de afișare setată la grilă. Iată mai multe:

Șablon grilă

Această proprietate definește dimensiunea rândurilor și coloanelor. Puteți dimensiona aceste proprietăți folosind pixeli, procente sau unitatea fracțională (fr). De asemenea, puteți utiliza cuvinte cheie precum auto, minim maxim(), și repeta() pentru a spori flexibilitatea.

  • rânduri-șablon-grilă: Setează înălțimile rândurilor.
  • grilă-șablon-coloane: definește lățimile coloanelor.

Aici sunt cateva exemple:

Utilizarea pixelilor:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Utilizarea procentelor:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Folosind fr:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

Folosind cuvinte cheie auto și minmax().:

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Folosind repeat() pentru dimensionare consistentă:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Plasare automată și zone de șablon de grilă

Plasare automată: Plasarea automată este ca și cum ai lăsa grila să decidă unde să pună articolele. Dacă nu specificați pozițiile exacte, grila va plasa automat elementele în ordinea în care apar în marcaj. Acest lucru este util atunci când aveți multe articole și doriți ca acestea să umple grila în mod uniform.

Zone de șablon de grilă: Gândiți-vă la zonele șablonului de grilă ca la crearea unui aspect folosind zone denumite. Este ca și cum ai denumi camerele pe un plan de etaj. Puteți face referire la aceste nume de zone atunci când poziționați elementele grilei. De exemplu:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Acest aspect este ca o grilă cu trei coloane și patru rânduri. Există două rânduri pentru zona principală de conținut. Zonele etichetate includ „antet”, „bară laterală”, „conținut” și „subsol”. În secțiunile următoare, veți învăța cum să utilizați aceste etichete de zonă în proprietățile fiecărui element de grilă.

Alinierea în grila CSS

Puteți utiliza proprietățile de aliniere pentru a controla poziționarea elementelor din grilă în celulele lor. Proprietățile sunt:

  • justificare-articole: Controlează alinierea orizontală a elementelor din celula lor de grilă.
    • Valori: început, sfârșit, centru și întindere.
  • alinierea elementelor: controlează alinierea verticală a elementelor din celula lor de grilă.
    • Valori: început, sfârșit, centru și întindere.
  • justifica-conținut: Aliniază întreaga grilă în interiorul containerului de-a lungul axei orizontale.
    • Valori: început, sfârșit, centru, întindere, spațiu-între, spațiu-în jur și spațiu-uniform.
  • alinierea-conținut: Aliniază întreaga grilă în interiorul containerului de-a lungul axei verticale.
    • Valori: început, sfârșit, centru, întindere, spațiu-între, spațiu-în jur și spațiu-uniform.

Iată un exemplu:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

În acest exemplu, elementele se vor centra atât orizontal, cât și vertical în celulele lor. Spațiul va fi distribuit uniform între coloanele întregii grile, iar grila se va centra vertical în container.

Grid Gap

Decalajul grilă se referă la spațiul dintre rânduri și coloane dintr-un aspect al grilei. Ajută la crearea unei separări vizuale și adaugă spațiu între elementele grilei.

The grid-gap proprietatea vă permite să setați decalajul dintre rânduri și coloane. Puteți utiliza diverse unități pentru a-l defini, cum ar fi pixeli (px), procente (%), unități em (em) și multe altele.

.grid-container {
grid-gap: 20px;
}

În acest exemplu, containerul grilă are două coloane cu un spațiu de 20 de pixeli între ele. Această spațiere separă vizual coloanele și îmbunătățește aspectul.

Proprietăți elementului grilă CSS

Iată câteva proprietăți cheie care controlează comportamentul elementelor de grilă individuale într-un aspect de grilă CSS, împreună cu exemple:

grid-row-start și grid-row-end:

  • Definește liniile de început și de sfârșit pentru un articol.
  • Valorile pot fi numere de linie, „span n” sau „auto”. 
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Acest cod plasează Elementul grilă 1 de la linia de al doilea rând la linia de al patrulea rând.

grid-coloană-start și grid-coloană-sfârșit:

  • Definește liniile de coloană de început și de sfârșit pentru un articol.
  • Valorile pot fi numere de linie, „span n” sau „auto”. 
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Acest cod plasează Elementul grilă 2 de la prima linie de coloană la a treia linie de coloană.

grilă-zonă:

  • Specifică dimensiunea și poziția unui element de grilă în cadrul grilei, făcând referire la liniile de grilă denumite în zone-șablon-grilă.
  • După cum am menționat mai devreme, numele de zone predefinite sunt deja utilizate cu zone-șablon-grilă proprietate. Iată un exemplu despre cum să îl utilizați împreună cu grilă-zonă. 
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Iată rezultatul:

justifica-sine:

  • Aliniază elementele individuale orizontal în interiorul celulei sale.
  • Valorile pot fi start, end, center și stretch. 
.grid-item-5 {
justify-self: center;
}

Acest cod centrează orizontal Elementul 5 al grilei în interiorul celulei sale.

aliniere-sine:

  • Aliniați elementele individuale vertical în interiorul celulei sale.
  • Valorile pot fi start, end, center și stretch. 
.grid-item-1 {
align-self: end;
}

Acest cod se aliniază Elementul grilă 1 până la fundul celulei sale.

Simțiți-vă liber să combinați și să personalizați aceste proprietăți pentru a crea aspectul și aspectul dorit pentru fiecare element de grilă din Grila dvs. CSS.

Crearea de layout-uri receptive folosind grile CSS

Folosind grile CSS pentru crearea de layout-uri receptive este important să vă asigurați că pagina dvs. web se adaptează perfect la diferite dimensiuni de ecran și dispozitive. Puteți aplica aceste metode:

  • Interogări media: Puteți utiliza interogări media pentru a aplica diferite aspecte ale grilei în funcție de dimensiunile ecranului. De exemplu, poate fi necesar să rearanjați elementele grilei sau să ajustați lățimea coloanelor pentru ecrane mai mici.
  • Unități flexibile: Folosiți unități relative, cum ar fi procente și fr pentru a permite elementelor și coloanelor din grilă să se ajusteze proporțional cu spațiul disponibil.
  • minim maxim(): Folosește minim maxim() funcție pentru a specifica o gamă de dimensiuni pentru coloanele sau rândurile grilei. Se asigură că elementele nu vor apărea prea mici sau prea mari pe diferite ecrane.

Nu uitați să ajustați coloanele și alte elemente, cum ar fi golurile dintre elementele grilei, dimensiunile fonturilor și marginile. Acesta asigură un aspect consistent și bine conceput, care funcționează bine pe diverse dispozitive.

Explorați posibilitățile CSS Grid Layout

Îmbrățișarea flexibilității și puterii rețelei CSS vă va permite să creați machete care nu numai că arată grozav, ci și se adaptează perfect la cerințele designului web modern. Așadar, aruncați-vă în lumea grilelor, explorați posibilitățile și creșteți-vă abilitățile de dezvoltare web.

Pe măsură ce vă aprofundați în sistemele de aspect, poate doriți să comparați alte metode de aspect cu grilele CSS. Puteți face acest lucru cu modulul CSS Flexbox. Acest lucru vă va ajuta să învățați să decideți atunci când lucrați la un proiect.