`place-items, place-content și place-self` în CSS

CSS Grid (Layout bidimensional) CSS3+

Prescurtări care aliniază pe ambele axe deodată: place-items pentru elemente, place-content pentru grilă, place-self pentru unul singur.

Sintaxă CSS

place-items: center;              /* align-items + justify-items */
place-items: start end;
place-content: center;            /* align-content + justify-content */
place-content: space-between center;
place-self: end;                  /* align-self + justify-self */

Ce face `place-items, place-content și place-self`

În CSS Grid alinierea are două axe: bloc (verticală, proprietățile align-*) și inline (orizontală, proprietățile justify-*). Proprietățile place-* le setează pe amândouă dintr-o singură linie: prima valoare pentru align, a doua pentru justify. Dacă dai o singură valoare, se aplică pe ambele axe.

• place-items aliniază fiecare element în celula lui (align-items + justify-items).
• place-content mută întreaga grilă în container când rămâne spațiu liber (align-content + justify-content).
• place-self se pune pe un singur copil și suprascrie alinierea lui (align-self + justify-self).

Cea mai cunoscută utilizare: display: grid; place-items: center; centrează perfect un element pe ambele axe.

Valori uzuale

Valoare	Descriere
`place-items`	align-items și justify-items: poziția elementelor în celulele lor.
`place-content`	align-content și justify-content: poziția grilei în container.
`place-self`	align-self și justify-self pentru un singur element.
`justify-items`	Alinierea orizontală a tuturor elementelor în celule (start, center, end, stretch).
`justify-self`	Alinierea orizontală a unui singur element în celula lui.

Exemple

Exemplul 1: Centrare perfectă cu două linii

Ecranul de încărcare are mesajul exact în mijloc, pe orizontală și pe verticală.

.ecran-incarcare {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

Efect vizual în browser

Mesajul „Se încarcă comanda ta…” stă în centrul exact al ecranului, oricât de mare ar fi fereastra.

Exemplul 2: Un singur element aliniat diferit în celula lui

Toate cardurile se întind pe toată celula, dar insigna „Nou” stă în colțul din dreapta jos al celulei ei.

.grila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 120px;
}
.grila .insigna-nou {
  place-self: end;
}