Skip to content

Cheat Sheet aspect CSS Grid

Această pagină oferă un cheat sheet vizual pentru aspectul CSS Grid, incluzând proprietățile esențiale pentru containerele de grilă și elementele de grilă, împreună cu exemple practice de aspect.

Container de Grilă (Grid Container)

Proprietate Valoare Descriere
display grid Definește elementul ca un container de grilă
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 Aliniază elementele grilei orizontal în interiorul celulelor grilei
align-items start Aliniază elementele grilei vertical în interiorul celulelor grilei
justify-content start Aliniază întreaga grilă orizontal în interiorul containerului de grilă
align-content start Aliniază întreaga grilă vertical în interiorul containerului de grilă

Elemente de Grilă (Grid Items)

Proprietate Valoare Descriere
grid-column 1 / 3 Definește coloanele ocupate de element
grid-row 1 / 3 Definește rândurile ocupate de element
grid-area header Plasează elementele grilei prin numirea zonelor
justify-self start Aliniază un element individual al grilei orizontal în interiorul celulei sale
align-self start Aliniază un element individual al grilei vertical în interiorul celulei sale
grid-column-start 1 Definește linia de început a coloanei
grid-column-end 3 Definește linia de sfârșit a coloanei
grid-row-start 1 Definește linia de început a rândului
grid-row-end 3 Definește linia de sfârșit a rândului

Exemplu de Media Query 

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

Alte exemple

Aspect pe două coloane 

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

Aspect 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;
}