Własność CSS grid-auto-columns

Własność CSS grid-auto-columns definiuje rozmiary kolumn siatki niejawnej w układach CSS Grid.

Siatka taka może powstać na przykład w wyniku umieszczenia jednostki siatki w kolumnie lub wierszu poza siatką jawną.

Wartości i składnia

Wartością własności grid-auto-columns jest lista rozdzielanych spacjami wartości określających szerokości kolumn siatki niejawnej układu CSS Grid. Jeśli zostanie podana tylko jedna wartość, to odnosi się ona do wszystkich kolumn niejawnych siatki. Jeśli zostanie ich podanych więcej, to będą cyklicznie stosowane jedna po drugiej do kolejnych kolumn niejawnych.

Własność grid-auto-columns przyjmuje następujące wartości:

Liczba z jednostką długości CSS

Dowolna nieujemna liczba z jednostką długości CSS.

Wartość procentowa

Nieujemna wartość procentowa, odnosi się do wewnętrznego rozmiaru kontenera siatki, a konkretnie do długości jego osi śródliniowej (w uproszczeniu poziomej — zobacz Oś blokowa i oś śródliniowa w CSS Grid). Jeśli rozmiar kontenera jest ustalany na podstawie szerokości kolumn, to wartość procentowa jest traktowana jako auto.

Liczba z jednostką fr

Jednostka fr (ang. flex factor) to tzw. współczynnik elastyczności, który określa, jaka część dostępnej przestrzeni wolnej przypada dla każdej kolumny. Jeśli na przykład zdefiniowane są kolumny o szerokościach 1fr, 2fr i 3fr, to pierwsza będzie zajmowała 1/6 tej przestrzeni, druga 2/6, a trzecia 3/6 (Zobacz Jednostka fr w CSS Grid).

Słowo kluczowe max-content

Oznacza, że kolumna powinna przybrać najmniejszą możliwą szerokość pozwalającą objąć całą jej zawartość. Jeśli nie zostaną zastosowane żadne dodatkowe ustawienia (np. własność overflow), to w przypadku kolumny zawierającej sam tekst wartość ta spowoduje, że kolumna ta rozszerzy się na szerokość, przy której pomieści cały tekst w jednym wierszu. To może spowodować jej wyjście poza granice kontenera a nawet okna przeglądarki (i pojawienie się poziomego paska przewijania). Obrazowo można powiedzieć, że to słowo działa jak folia stretchowa, która ściśle owija produkt.

Słowo kluczowe min-content

Oznacza najmniejszy możliwy rozmiar, jaki może przyjąć kolumna, nie powodując przepełnienia. W praktyce często sprowadza się to do szerokości najdłuższego słowa w kolumnie.

Funkcja minmax()

Definiuje minimalną i maksymalną szerokość kolumny. Zobacz Funkcja CSS minmax().

Słowo kluczowe auto

Jeśli zostanie użyte samodzielnie, powoduje, że kolumna zajmuje całą przestrzeń, jaka jest dostępna w kontenerze po ustaleniu rozmiarów pozostałych kolumn. Jeśli dwie kolumny mają wartość auto, to dostępna przestrzeń jest dzielona między nie po równo itd.

Jeśli słowo to zostanie użyte w funkcji minmax(), to na pozycji wartości minimalnej w większości przypadków oznacza min-content.

Na pozycji wartości maksymalnej oznacza max-content, ale dodatkowo reaguje na ustawienia własności align-content i justify-content.

Funkcja fit-content()

Wykorzystuje dostępną wolną przestrzeń, ale działa w granicach między min-content a max-content.

Podsumowanie