Własność CSS grid-row-end

Własność CSS grid-row-end określa linię końcową jednostki siatki w wymiarze śródliniowym układu CSS Grid oraz ewentualnie jej wysokość wyrażoną w postaci liczby wierszy rozpiętości.

Wartości i składnia

Własność grid-row-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 wiersza, na którym 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 wysokość obejmującą określoną liczbę wierszy i będzie się zaczynać w miejscu wskazanym przez własność grid-row-start. Na przykład:

grid-row-start: 1;
grid-row-end: span 3;

Te deklaracje oznaczają, że jednostka siatki będzie zaczynała się na pierwszej linii poziomej siatki oraz będzie obejmować trzy komórki siatki za tą pierwszą linią poziomą, jak widać na poniższym zrzucie ekranu:

Słowo kluczowe span i nazwa-linii

Jednostka siatki będzie miała wysokość obejmującą wiersze do linii o określonej nazwie od miejsca wskazywanego przez własność grid-row-start.

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

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

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

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

Jednostka siatki zaczyna się od linii o numerze 1. Od tej linii (jej nie licząc) odliczamy 2 linie w dół kontenera, w wyniku czego dochodzimy do linii nr 3. Oznacza to, że nasz element jest rozpięty między liniami kolumn 1–3. Nasza siatka z rozpiętym na niej elementem wygląda więc tak:

Podsumowanie