Własność CSS grid-row-start

Własność CSS grid-row-start określa linię początkową 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-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 wiersza, od którego 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 wysokość obejmującą określoną liczbę wierszy i będzie się kończyć w miejscu wskazanym przez własność grid-row-end. Na przykład:

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

Te deklaracje oznaczają, że jednostka siatki będzie kończyła się na czwartej linii poziomej siatki oraz będzie obejmować trzy komórki siatki przed tą czwartą 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 od linii o określonej nazwie od miejsca wskazywanego przez własność grid-row-end.

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-end a n-tą linią o określonej nazwie, np.:

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

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

Podsumowanie