Kurs HTML

13.11. Wyrównanie w komórce: justify-items i align-items

Strona główna > Kurs CSS > Rozdział 13: Grid Layout > Wyrównanie w komórce: justify-items i align-items

Wyrównanie zawartości elementu Grid

Do tej pory skupialiśmy się na definiowaniu struktury siatki i umieszczaniu w niej elementów Grid. Teraz zajmiemy się tym, jak **zawartość** elementu Grid jest wyrównywana **wewnątrz obszaru siatki**, który ten element zajmuje (czyli wewnątrz jego komórki lub grupy komórek).

Do tego służą właściwości justify-items i align-items, stosowane do **kontenera Grid**. Kontrolują one domyślne wyrównanie **wszystkich** elementów potomnych w ich odpowiednich obszarach siatki.

  • justify-items: Wyrównuje elementy wzdłuż **osi rzędów (inline axis)** wewnątrz ich obszaru siatki.
  • align-items: Wyrównuje elementy wzdłuż **osi kolumn (block axis)** wewnątrz ich obszaru siatki.

Pomyśl o tym jak o ustawieniu domyślnego zachowania dla wszystkich komórek w siatce.

Wizualizacja osi dla justify-items i align-items (Diagram pokazujący oś rzędów (poziomą) dla justify-items i oś kolumn (pionową) dla align-items wewnątrz komórki siatki)

Wartości justify-items i align-items

Obie właściwości przyjmują te same cztery główne wartości:

  • stretch (wartość domyślna): Element rozciąga się, aby wypełnić cały dostępny obszar siatki w danej osi.
  • start: Element jest wyrównywany do **początku** obszaru siatki w danej osi (do lewej dla justify-items, do góry dla align-items w typowym układzie LTR).
  • end: Element jest wyrównywany do **końca** obszaru siatki w danej osi (do prawej dla justify-items, do dołu dla align-items).
  • center: Element jest wyśrodkowany w obszarze siatki w danej osi.
  • (Istnieją też inne wartości jak baseline, left, right, ale start, end, center, stretch są najczęściej używane i bardziej uniwersalne).

Przykład użycia

<div class="container">
  <div class="item">Element 1</div>
  <div class="item">Element 2</div>
  <div class="item">Element 3</div>
  <div class="item">Element 4</div>
</div>
.container {
  display: grid;
  grid-template-columns: 120px 120px;
  grid-template-rows: 80px 80px;
  gap: 10px;
  border: 1px solid black;

  /* Wyrównanie dla wszystkich elementów */
  justify-items: center; /* Wyśrodkuj w poziomie w komórkach */
  align-items: end;    /* Wyrównaj do dołu w komórkach */
}

.item {
  background-color: lightblue;
  border: 1px solid navy;
  padding: 5px; /* Dodajemy padding, aby zobaczyć efekt wyrównania */
  /* Domyślnie elementy byłyby rozciągnięte (stretch) */
}

Efekt wizualny:

Element 1
Element 2
Element 3
Element 4

Wszystkie elementy są teraz wyśrodkowane w poziomie (justify-items: center;) i wyrównane do dolnej krawędzi (align-items: end;) swoich komórek siatki.

Gdybyśmy nie ustawili justify-items i align-items, domyślnie obowiązywałoby stretch i elementy (a dokładniej ich tło i obramowanie) wypełniłyby całe komórki.

Wpływ na rozmiar elementu

Wartości inne niż stretch powodują, że element kurczy się do rozmiaru swojej zawartości (lub rozmiaru jawnie ustawionego za pomocą width/height) w danej osi, a następnie jest przesuwany na początek, koniec lub środek dostępnego miejsca w komórce.

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Stwórz siatkę 2x2. Ustaw, aby wszystkie elementy były wyrównane do prawej strony (koniec osi rzędów) i do środka w pionie (środek osi kolumn) w swoich komórkach.

Rozwiązanie:

HTML (4 elementy):

<div class="container-task1">
  <div class="item">1</div><div class="item">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;

  justify-items: end;    /* Wyrównaj do prawej */
  align-items: center; /* Wyśrodkuj w pionie */
}

.item {
  background-color: lightcoral;
  border: 1px solid darkred;
  padding: 8px;
}

Efekt: Wszystkie elementy będą przytulone do prawej krawędzi swoich komórek i wyśrodkowane w pionie.

Zadanie 2 (do samodzielnego wykonania)

Stwórz siatkę 3x1. Ustaw, aby elementy były wyrównane do lewej (start) w poziomie i rozciągnięte (stretch) w pionie.

Zadanie 3 (do samodzielnego wykonania)

Stwórz siatkę 1x3. Ustaw, aby elementy były wyśrodkowane zarówno w poziomie, jak i w pionie.

FAQ - Najczęściej zadawane pytania

Jaka jest różnica między justify-items a justify-content?

To częste źródło pomyłek! justify-items (i align-items) wyrównuje **poszczególne elementy Grid wewnątrz ich komórek**. Natomiast justify-content (i align-content), które omówimy w następnej lekcji, wyrównuje **całą siatkę (wszystkie ścieżki) wewnątrz kontenera Grid**, gdy jest w nim wolne miejsce.

Czy mogę ustawić inne wyrównanie dla konkretnego elementu?

Tak! Właściwości justify-items i align-items ustawiają domyślne wyrównanie dla wszystkich elementów w kontenerze. Możesz nadpisać to domyślne zachowanie dla **konkretnego elementu Grid** za pomocą właściwości justify-self i align-self, które omówimy później.

Co oznacza oś rzędów (inline) i oś kolumn (block)?

W typowym układzie (języki pisane od lewej do prawej, od góry do dołu), **oś rzędów (inline axis)** biegnie poziomo, a **oś kolumn (block axis)** biegnie pionowo. justify-items działa wzdłuż osi rzędów, a align-items wzdłuż osi kolumn.

Czy stretch zawsze rozciąga element?

stretch rozciąga element, aby wypełnił obszar siatki, **chyba że** element ma jawnie ustawiony rozmiar (np. width dla justify-items lub height dla align-items) lub jego naturalny rozmiar (np. obrazka) jest mniejszy niż dostępna przestrzeń. W takich przypadkach stretch zachowuje się jak start.