Własność CSS grid-column-start

Własność CSS grid-column-start określa linię początkową jednostki siatki w wymiarze kolumnowym układu CSS Grid oraz ewentualnie jej szerokość wyrażoną w postaci liczby kolumn rozpiętości.

Wartości i składnia

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

Słowo kluczowe auto

Oznacza automatyczne umiejscowienie, automatyczną rozpiętość elementu lub domyślną rozpiętość wynoszącą 1.

Liczba całkowita

Określa numer linii kolumny, od której ma się zaczynać jednostka siatki.

Nazwa linii

Określa nazwę linii, od której ma się zaczynać jednostka siatki.

Słowo kluczowe span i liczba całkowita

Jednostka siatki będzie miała szerokość obejmującą określoną liczbę kolumn i będzie się kończyć w miejscu wskazanym przez własność grid-column-end. Na przykład:

grid-column-start: span 3;
grid-column-end: 9;

Te deklaracje oznaczają, że jednostka siatki będzie kończyła się na dziewiątej linii kolumny siatki oraz będzie obejmować trzy komórki siatki przed tą dziewiątą linią kolumny, jak widać na poniższym zrzucie ekranu:

Słowo kluczowe span i nazwa-linii

Jednostka siatki będzie miała szerokość obejmującą kolumny od linii o określonej nazwie do miejsca wskazywanego przez własność grid-column-end.

Słowo kluczowe span, liczba całkowita i nazwa-linii

Jednostka siatki będzie obejmowała kolumny między n-tą linią o określonej nazwie a miejscem wskazywanym przez własność grid-column-end, np.:

.grid-container {
  grid: repeat(3, 100px) / repeat(9, [linia] 100px [linia]);
}
.item {
  grid-column-start: span 7 linia;
  grid-column-end: 10;
}

W tym przykładzie został utworzony kontener siatki, zawierający trzy wiersze i dziewięć kolumn. Wszystkie linie kolumn mają nazwę linia, a więc w sumie jest 10 linii kolumn o takiej samej nazwie.

Jednostka siatki kończy się na linii o numerze 10, czyli ostatniej. Od tej linii (jej nie licząc) odliczamy 7 linii w kierunku początku kontenera, w wyniku czego dochodzimy do linii nr 3. Oznacza to, że nasz element jest rozpięty między liniami kolumn 3–10. Nasza siatka z rozpiętym na niej elementem wygląda więc tak:

Podsumowanie