Własność CSS grid-column-end

Własność CSS grid-column-end określa linię końcową 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-end 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, na której ma się kończyć jednostka siatki.

Nazwa linii

Określa nazwę linii, na której ma się kończyć 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ę zaczynać w miejscu wskazanym przez własność grid-column-start. Na przykład:

grid-column-start: 2;
grid-column-end: span 4;

Te deklaracje oznaczają, że jednostka siatki będzie zaczynała się na drugiej linii kolumny siatki oraz będzie obejmować cztery komórki siatki za tą drugą 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 do linii o określonej nazwie od miejsca wskazywanego przez własność grid-column-start.

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

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

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

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 zaczyna się od linii o numerze 3. Od tej linii (jej nie licząc) odliczamy 5 linii w kierunku końca kontenera, w wyniku czego dochodzimy do linii nr 8. Oznacza to, że nasz element jest rozpięty między liniami kolumn 3–8. Nasza siatka z rozpiętym na niej elementem wygląda więc tak:

Podsumowanie