Ce este CSS Grid?

Aspectul de grilă CSS (sau pur și simplu CSS Grid) este un sistem de aranjare bidimensional în CSS. Permite gestionarea plasării elementelor atât pe rânduri (orizontal), cât și pe coloane (vertical), creând structuri complexe de rețea pentru construirea interfețelor.

Conceptele principale ale CSS Grid includ:

Container de grilă: Elementul asupra căruia se aplică proprietatea display: grid sau display: inline-grid. Descendenții acestui element devin Elemente de grilă.
Elemente de grilă: Descendenții direcți ai containerului de grilă.
Linii de grilă: Linii de separare care formează grila. Pot fi numite sau au un indice numeric.
Trasee de grilă: Spațiul dintre două linii de grilă — fie coloană, fie rând.
Celule de grilă: Cea mai mică unitate de grilă, formată prin intersecția unui rând și a unei coloane.
Zone de grilă: O regiune dreptunghiulară a grilei, ocupând una sau mai multe celule.

Proprietățile cheie pentru lucrul cu CSS Grid includ:

Pentru container:

display: grid | inline-grid;
grid-template-columns: Definește coloanele grilei.
grid-template-rows: Definește rândurile grilei.
grid-template-areas: Definește zonele denumite ale grilei.
gap | row-gap | column-gap: Definește spațiile dintre celule.
justify-items | align-items | place-items: Alinierea conținutului în interiorul celulelor de-a lungul axelor principale și transversale.
justify-content | align-content | place-content: Alinierea liniilor de grilă în interiorul containerului.

Pentru elemente (Elemente de grilă):

grid-column-start | grid-column-end | grid-column: Determină ce linii de coloană ocupă elementul.
grid-row-start | grid-row-end | grid-row: Determină ce linii de rând ocupă elementul.
grid-area: Atribuie elementului o zonă denumită a grilei sau îi definește poziția folosind liniile.
justify-self | align-self | place-self: Alinierea elementului în interiorul celulei sale.

CSS Grid oferă instrumente puternice pentru crearea de layout-uri responsive și complexe, simplificând semnificativ sarcinile care anterior necesitau utilizarea float, inline-block sau poziționare absolută.

.container {
  display: grid; /* Transformă elementul într-un container de grilă */
  grid-template-columns: 1fr 1fr 1fr; /* Creează 3 coloane de aceeași lățime */
  grid-template-rows: auto auto; /* Creează 2 rânduri cu înălțime automată */
  gap: 10px; /* Adaugă spații între celule */
}

.item {
  /* Elementele din interiorul containerului devin automat elemente de grilă */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Primul element ocupă coloanele de la 1 la 3 */
}