Własność CSS grid-template-columns

Własność CSS grid-template-columns określa liczbę i rozmiary kolumn oraz nazwy linii tworzących te kolumny w układzie CSS Grid.

Wartości i składnia

Wartością własności grid-template-columns jest lista rozdzielanych spacjami wartości określających liczbę i szerokości kolumn siatki oraz nazwy linii, które wyznaczają ich granice. Jej najprostsza możliwa deklaracja może zawierać jedną liczbę z jednostką długości, która spowoduje utworzenie jednej kolumny o takiej szerokości, np.:

grid-template-columns: 100px;

Ta deklaracja tworzy jedną kolumnę siatki o szerokości 100 pikseli. Jeśli dodana zostanie kolejna wartość, własność grid-template-columns utworzy dwie kolumny, każda o określonej szerokości itd. Poniższa deklaracja tworzy trzy kolumny: pierwsza ma szerokość 100 pikseli, druga — 200, a trzecia — 300:

grid-template-columns: 100px 200px 300px;

Szerokość kolumn można definiować na wiele sposobów.

Wartości rozmiaru

Własność grid-template-columns przyjmuje następujące wartości do określania szerokości kolumn:

Słowo kluczowe none

Oznacza, że ta własność nie tworzy żadnych kolumn jawnych.

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ą wiersze o wysokościach 1fr, 2fr i 3fr, to pierwszy będzie zajmował 1/6 tej przestrzeni, drugi 2/6, a trzeci 3/6 (Zobacz Jednostka fr w układach 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.

Funkcja repeat()

Powtarza podaną wartość określoną liczbę razy. Zobacz Funkcja CSS repeat().

Słowo kluczowe subgrid

Oznacza przyjęcie przez kolumnę ustawień siatki nadrzędnej w obszarze, który ta kolumna obejmuje. Zobacz Siatki zagnieżdżone i podsiatki w układach CSS Grid.

Nazwy linii

Oprócz rozmiarów i liczby kolumn za pomocą własności grid-template-columns można także określić nazwy linii, które muszą być prawidłowym identyfikatorem CSS. Należy je wpisywać w nawiasie kwadratowym i oddzielać od innych wartości spacjami, np.:

grid-template-columns: [pierwsza-linia] 100px [druga-linia];

Ta deklaracja tworzy jedną kolumnę o szerokości 100 pikseli. Linia początkowa tej kolumny nazywa się pierwsza-linia, a jej linia końcowa nazywa się druga-linia.

Każdej linii można nadać dowolną liczbę nazw, które należy wymienić w nawiasie kwadratowym rozdzielone spacjami, np.:

grid-template-columns: [pierwsza-linia linia-początkowa początek-kolumny] 100px [druga-linia];

Do linii początkowej kolumny utworzonej przez powyższą deklarację można odwoływać się za pomocą dowolnej z trzech nazw.

Podsumowanie