Skip to content

Listă recapitulativă CSS Grid Layout

Această pagină oferă o listă recapitulativă vizuală pentru layout-ul CSS Grid, inclusiv proprietățile de bază pentru containerul grid, elementele grid și exemple practice de layout.

Container Grid (Grid Container)

Proprietate Valoare Descriere
display grid Definește elementul ca fiind un container grid
grid-template-columns 100px 1fr Definește lățimea coloanelor
grid-template-rows 100px 1fr Definește înălțimea rândurilor
grid-template-areas header header
sidebar main
footer footer		 Definește grila prin numirea zonelor
grid-column-gap 10px Definește spațiul dintre coloane
grid-row-gap 10px Definește spațiul dintre rânduri
grid-gap 10px 20px Definește simultan spațiul dintre rânduri și coloane
justify-items start Definește alinierea orizontală a elementelor grid în interiorul celulelor
align-items start Definește alinierea verticală a elementelor grid în interiorul celulelor
justify-content start Definește alinierea orizontală a întregii grile în interiorul containerului
align-content start Definește alinierea verticală a întregii grile în interiorul containerului

Elemente Grid (Grid Items)

Proprietate Valoare Descriere
grid-column 1 / 3 Definește coloanele pe care le ocupă elementul
grid-row 1 / 3 Definește rândurile pe care le ocupă elementul
grid-area header Plasează un element grid printr-o zonă numită
justify-self start Definește alinierea orizontală a unui singur element în celula sa
align-self start Definește alinierea verticală a unui singur element în celula sa
grid-column-start 1 Definește linia de început a coloanei pentru element
grid-column-end 3 Definește linia de sfârșit a coloanei pentru element
grid-row-start 1 Definește linia de început a rândului pentru element
grid-row-end 3 Definește linia de sfârșit a rândului pentru element

Exemplu Media Query 

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Alte exemple

Layout pe două coloane 

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

Layout pe trei coloane 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Centrare verticală 

.container {
  display: grid;
  align-items: center;
}

Centrare orizontală 

.container {
  display: grid;
  justify-items: center;
}