Własność CSS grid-column

Własność CSS grid-column to własność zbiorcza określająca linię początkową i końcową jednostki siatki w orientacji kolumnowej w układzie CSS Grid oraz ewentualnie dodatkowo szerokość tej jednostki wyrażoną w formie liczby kolumn jej rozpiętości.

Własność zbiorcza grid-column obejmuje następujące własności indywidualne:

• grid-column-start
• grid-column-end

Wartości i składnia

Własność grid-column jako wartość przyjmuje parę definicji linii lub jedną definicję linii:

grid-column-start / grid-column-end

Definicje linii początkowej i końcowej jednostki siatki rozdzielone ukośnikiem. Składnia każdej z nich jest opisana na stronach indywidualnych własności grid-column-start i grid-column-end. Na przykład:

grid-column: 3 / span 4;

Ta deklaracja oznacza, że jednostka siatki zaczyna się od linii trzeciej oraz obejmuje cztery kolumny, jak widać na poniższym zrzucie ekranu:

grid-column-start

Jeśli zostanie zdefiniowana tylko jedna linia, to jest ona traktowana jako definicja linii początkowej, a końcowa domyślnie przyjmuje wartość 1.

Jeśli jedyna wartość zawiera słowo kluczowe span bez nazwy linii, definiowany obszar zaczyna się od początku kontenera, np.:

grid-column: span 3;

Ta deklaracja oznacza, że początek obszaru jednostki siatki stanowi pierwsza linia kolumny kontenera oraz że obszar ten obejmuje trzy kolumny.

Podsumowanie