Wyrównywanie pojedynczego elementu w CSS Grid: justify-self i align-self

13.13. Wyrównanie pojedynczego elementu: `justify-self` i `align-self`

Strona główna > Kurs CSS > Rozdział 13: Grid Layout > Wyrównanie pojedynczego elementu: justify-self i align-self

Nadpisywanie domyślnego wyrównania

Właściwości justify-items i align-items, stosowane do kontenera Grid, ustawiają **domyślne** wyrównanie dla **wszystkich** elementów potomnych wewnątrz ich obszarów siatki.

Często jednak chcemy, aby **konkretny element** zachowywał się inaczej niż pozostałe pod względem wyrównania w swojej komórce. Do tego służą właściwości justify-self i align-self, które stosuje się bezpośrednio do **elementu Grid**, którego wyrównanie chcemy zmodyfikować.

justify-self: Nadpisuje justify-items dla danego elementu, kontrolując jego wyrównanie wzdłuż **osi rzędów (inline axis)**.
align-self: Nadpisuje align-items dla danego elementu, kontrolując jego wyrównanie wzdłuż **osi kolumn (block axis)**.

Wartości `justify-self` i `align-self`

Przyjmują one te same wartości co ich odpowiedniki dla kontenera (justify-items i align-items):

stretch: Rozciąga element, aby wypełnił obszar siatki w danej osi (domyślne zachowanie, jeśli justify-items/align-items nie jest ustawione lub ma wartość stretch).
start: Wyrównuje element do początku obszaru siatki w danej osi.
end: Wyrównuje element do końca obszaru siatki w danej osi.
center: Wyśrodkowuje element w obszarze siatki w danej osi.
auto (wartość domyślna dla justify-self/align-self): Element dziedziczy wyrównanie ustawione przez justify-items/align-items na kontenerze Grid. Jeśli te nie są ustawione, auto zachowuje się jak stretch.
(Istnieją też inne wartości jak baseline, left, right).

Przykład użycia

Załóżmy, że domyślnie wszystkie elementy są wyśrodkowane (justify-items: center; align-items: center;), ale chcemy, aby jeden konkretny element rozciągał się na całą szerokość swojej komórki.

<div class="container">
  <div class="item">Element 1</div>
  <div class="item special">Element 2 (Special)</div>
  <div class="item">Element 3</div>
  <div class="item">Element 4</div>
</div>

.container {
  display: grid;
  grid-template-columns: 150px 150px;
  grid-template-rows: 80px 80px;
  gap: 10px;
  border: 1px solid black;

  /* Domyślne wyrównanie dla wszystkich */
  justify-items: center;
  align-items: center;
}

.item {
  background-color: lightblue;
  border: 1px solid navy;
  padding: 5px;
}

.special {
  background-color: lightcoral;
  /* Nadpisanie domyślnego wyrównania tylko dla tego elementu */
  justify-self: stretch; /* Rozciągnij w poziomie */
  align-self: start;   /* Wyrównaj do góry (nadpisuje align-items: center) */
}

Efekt wizualny:

Element 1

Element 2 (Special)

Element 3

Element 4

Elementy 1, 3 i 4 są wyśrodkowane w swoich komórkach. Natomiast element 2 (.special) jest rozciągnięty na całą szerokość swojej komórki (justify-self: stretch;) i wyrównany do górnej krawędzi (align-self: start;).

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Stwórz siatkę 2x2. Ustaw domyślne wyrównanie elementów na stretch (czyli brak justify-items/align-items). Następnie dla drugiego elementu (w prawym górnym rogu) ustaw wyrównanie na end zarówno w poziomie, jak i w pionie za pomocą justify-self i align-self.

Rozwiązanie:

HTML (4 elementy):

<div class="container-task1">
  <div class="item">1</div>
  <div class="item item-2">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

CSS:

.container-task1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 70px 70px;
  gap: 5px;
  border: 1px solid black;
  /* Brak justify-items/align-items - domyślnie stretch */
}

.item {
  background-color: lightblue;
  border: 1px solid navy;
  padding: 8px;
}

.item-2 {
  background-color: lightgreen;
  justify-self: end; /* Wyrównaj do prawej */
  align-self: end;   /* Wyrównaj do dołu */
}

Efekt: Elementy 1, 3, 4 wypełnią swoje komórki. Element 2 skurczy się do rozmiaru zawartości i zostanie umieszczony w prawym dolnym rogu swojej komórki.

Zadanie 2 (do samodzielnego wykonania)

Stwórz siatkę 3x1. Ustaw domyślne justify-items: center;. Dla pierwszego elementu ustaw justify-self: start;, a dla ostatniego justify-self: end;.

Zadanie 3 (do samodzielnego wykonania)

Stwórz siatkę 1x3. Ustaw domyślne align-items: center;. Dla środkowego elementu ustaw align-self: stretch;.

FAQ - Najczęściej zadawane pytania

Jaka jest domyślna wartość `justify-self` i `align-self`?

Domyślną wartością jest auto. Oznacza to, że element domyślnie przyjmuje wyrównanie określone przez justify-items i align-items na kontenerze Grid. Jeśli te właściwości nie są ustawione na kontenerze, auto zachowuje się jak stretch.

Czy `justify-self`/`align-self` działają tak samo jak we Flexboxie?

Tak, koncepcja i wartości są identyczne jak dla align-self we Flexboxie (Flexbox nie ma bezpośredniego odpowiednika dla justify-self, ponieważ wyrównanie na osi głównej kontroluje się za pomocą justify-content i marginesów). W obu przypadkach służą do nadpisania domyślnego wyrównania dla pojedynczego elementu.

Czy mogę użyć `justify-self`/`align-self` do wyrównania całej siatki?

Nie, te właściwości działają tylko na **pojedynczy element Grid** wewnątrz jego obszaru siatki. Do wyrównania całej siatki w kontenerze służą justify-content i align-content.

Co się stanie, jeśli ustawię `justify-self: stretch;` na elemencie o stałej szerokości?

Jeśli element ma jawnie ustawioną szerokość (np. width: 100px;), to justify-self: stretch; nie rozciągnie go. W takim przypadku stretch zachowa się jak start, umieszczając element o stałej szerokości na początku jego obszaru siatki w osi rzędów. Analogicznie działa to dla align-self: stretch; i stałej wysokości.

13.13. Wyrównanie pojedynczego elementu: justify-self i align-self