13.12. Wyrównanie siatki: justify-content
i align-content
justify-content
i align-content
Wyrównanie całej siatki
W poprzedniej lekcji omówiliśmy justify-items
i align-items
, które wyrównują **poszczególne elementy Grid wewnątrz ich komórek**.
Teraz zajmiemy się właściwościami justify-content
i align-content
. Te właściwości działają na innym poziomie: wyrównują **całą siatkę (wszystkie jej ścieżki razem wzięte)** wewnątrz **kontenera Grid**, ale tylko wtedy, gdy **całkowity rozmiar ścieżek siatki jest mniejszy niż rozmiar kontenera Grid** w danej osi, pozostawiając wolne miejsce.
Stosuje się je do **kontenera Grid**.
justify-content
: Wyrównuje siatkę wzdłuż **osi rzędów (inline axis)** wewnątrz kontenera.align-content
: Wyrównuje siatkę wzdłuż **osi kolumn (block axis)** wewnątrz kontenera.
Jeśli siatka idealnie wypełnia kontener w danej osi (np. suma szerokości kolumn i odstępów jest równa szerokości kontenera), te właściwości nie będą miały widocznego efektu w tej osi.
Wartości justify-content
i align-content
Obie właściwości przyjmują podobny zestaw wartości, kontrolujących dystrybucję wolnego miejsca:
start
: Grupuje ścieżki siatki na **początku** kontenera w danej osi (po lewej dlajustify-content
, na górze dlaalign-content
).end
: Grupuje ścieżki siatki na **końcu** kontenera w danej osi (po prawej dlajustify-content
, na dole dlaalign-content
).center
: Grupuje ścieżki siatki na **środku** kontenera w danej osi.stretch
: (Domyślna wartość dlaalign-content
, jeśli wiersze mają rozmiarauto
). Rozciąga ścieżki o rozmiarzeauto
, aby wypełnić dostępną przestrzeń. Dlajustify-content
nie ma takiego samego efektu rozciągania kolumn.space-around
: Rozdziela wolne miejsce równomiernie **wokół** każdej ścieżki siatki. Odstęp na krawędziach kontenera jest o połowę mniejszy niż odstęp między ścieżkami.space-between
: Rozdziela wolne miejsce równomiernie **pomiędzy** ścieżkami siatki. Pierwsza ścieżka jest przytulona do początku, ostatnia do końca kontenera.space-evenly
: Rozdziela wolne miejsce równomiernie **pomiędzy** każdą ścieżką oraz **między krawędziami kontenera a skrajnymi ścieżkami**. Wszystkie odstępy są równe.- (Istnieją też inne wartości jak
baseline
, ale powyższe są najczęściej używane).
Ważne: Wartości space-*
działają tylko wtedy, gdy jest więcej niż jedna ścieżka w danej osi.
Przykład użycia
Załóżmy, że mamy kontener o stałych wymiarach i siatkę, która jest mniejsza niż kontener.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
.container {
display: grid;
width: 400px; /* Stała szerokość kontenera */
height: 300px; /* Stała wysokość kontenera */
border: 2px solid black;
padding: 10px;
grid-template-columns: 100px 100px; /* Suma kolumn = 200px < 400px */
grid-template-rows: 80px 80px; /* Suma wierszy = 160px < 300px */
gap: 10px; /* Suma odstępów: 10px w poziomie, 10px w pionie */
/* Całkowity rozmiar siatki: 210px x 170px */
/* Wyrównanie całej siatki w kontenerze */
justify-content: center; /* Wyśrodkuj siatkę w poziomie */
align-content: space-between; /* Rozmieść wiersze na górze i na dole */
}
.item {
background-color: lightblue;
border: 1px solid navy;
display: flex; justify-content: center; align-items: center;
}
Efekt wizualny:
Cała siatka 2x2 (o wymiarach 210x170px wliczając odstęp) jest wyśrodkowana w poziomie wewnątrz kontenera 400x300px (justify-content: center;
). W pionie, pierwszy wiersz jest przytulony do górnej krawędzi dostępnego miejsca, a drugi wiersz do dolnej krawędzi, z maksymalnym odstępem między nimi (align-content: space-between;
).
Zadania praktyczne
Zadanie 1 (z rozwiązaniem)
Stwórz kontener 300x200px. Wewnątrz umieść siatkę 2x2 z kolumnami 50px i wierszami 50px oraz odstępem 5px. Użyj justify-content
i align-content
, aby wyśrodkować całą siatkę zarówno w poziomie, jak i w pionie wewnątrz kontenera.
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;
width: 300px;
height: 200px;
border: 1px solid black;
grid-template-columns: 50px 50px;
grid-template-rows: 50px 50px;
gap: 5px;
justify-content: center; /* Wyśrodkuj w poziomie */
align-content: center; /* Wyśrodkuj w pionie */
}
.item {
background-color: lightcoral;
border: 1px solid darkred;
display: flex; justify-content: center; align-items: center;
}
Efekt: Mała siatka 2x2 pojawi się idealnie na środku większego kontenera.
Zadanie 2 (do samodzielnego wykonania)
Stwórz kontener 400x250px. Wewnątrz siatka 3x2 z kolumnami 80px i wierszami 60px, odstęp 10px. Użyj justify-content: space-evenly;
i align-content: end;
. Zaobserwuj efekt.
Zadanie 3 (do samodzielnego wykonania)
Stwórz kontener 200x300px. Wewnątrz siatka 1x3 z kolumną 100px i wierszami 50px, odstęp 8px. Użyj justify-content: start;
i align-content: space-around;
. Zaobserwuj efekt.
FAQ - Najczęściej zadawane pytania
Kiedy justify-content
i align-content
mają efekt?
Tylko wtedy, gdy suma rozmiarów ścieżek siatki (kolumn dla justify-content
, wierszy dla align-content
) wraz z odstępami (gap
) jest **mniejsza** niż odpowiedni wymiar kontenera Grid. Jeśli siatka wypełnia kontener lub jest większa, te właściwości nie mają gdzie rozmieścić wolnego miejsca.
Czy te właściwości działają tak samo jak we Flexboxie?
Tak, koncepcja i większość wartości (start
, end
, center
, space-between
, space-around
, space-evenly
) są bardzo podobne do odpowiadających im właściwości we Flexboxie. Różnica polega na tym, że we Flexboxie wyrównują one elementy Flex wzdłuż osi głównej/poprzecznej, a w Gridzie wyrównują całą siatkę ścieżek w kontenerze.
Jaka jest domyślna wartość justify-content
i align-content
?
Domyślną wartością dla obu jest zazwyczaj interpretowana jako start
(lub normal
, co w większości przypadków działa jak start
). Wyjątkiem jest align-content
, które domyślnie działa jak stretch
, jeśli wiersze mają rozmiar auto
.
Czy mogę użyć tych właściwości do wyrównania pojedynczego elementu?
Nie, justify-content
i align-content
działają na **całą grupę ścieżek siatki**. Do wyrównania pojedynczego elementu wewnątrz jego komórki służą justify-self
i align-self
(omówione w następnej lekcji) lub justify-items
i align-items
ustawione na kontenerze.