- Autor publikacji
- Virtual Patriot - Administrator
grid-row-end
- Data publikacji
- Ostatnio edytowano
Przeznaczenie właściwości grid-row-end
Za pomocą właściwości grid-row-end
możemy określić, która linia wierszowa siatki elementu HTML tworzącego układ siatki ma stanowić końcową krawędź wierszową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.
- Informacje dodatkowe
-
gdy wartość właściwości grid-row-start oraz wartość właściwości
grid-row-end
wskazuje na tę samą linię wierszową siatki, wtedy wartością właściwościgrid-row-end
staje się wartość autogdy wartość właściwości grid-row-start wskazuje na linię wierszową siatki występującą w kolejności rosnącej po linii wierszowej siatki, na którą wskazuje wartość właściwości
grid-row-end
, wtedy obie wartości obu właściwości zostają ze sobą zamienione
Informacje techniczne o właściwości grid-row-end
- przeznaczenie
-
-
element dziecko elementu HTML typu grid
-
element dziecko elementu HTML typu inline-grid
-
- pozycja
-
Właściwość "grid-row-end" oddziałuje również na element HTML posiadający pozycję absolute, lecz tylko wtedy, gdy elementem HTML (względem którego odbywa się pozycjonowanie danego elementu HTML posiadającego pozycję absolute) jest element HTML typu grid lub inline-grid. W tym wypadku przeznaczeniem właściwości "grid-row-end" jest również element potomek elementu HTML typu grid lub inline-grid.
- dziedziczenie
-
nie
- wartość initial
- wyjątki initial
-
brak
- animowanie
-
tak (animacja schodkowa)
Interpretacja właściwości grid-row-end
-
tak
-
tak
-
tak
-
tak
-
nie
-
tak
Zobacz więcej informacji o interpretacji właściwości grid-row-end.
Opis wartości właściwości grid-row-end
auto
Wyjaśnienie
Wartość auto
jest domyślną wartością właściwości grid-row-end
.
Domyślnie przeglądarka internetowa sama określa, która linia wierszowa siatki elementu HTML tworzącego układ siatki ma stanowić końcową krawędź wierszową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.
Wartość właściwości grid-auto-flow elementu HTML tworzącego układ siatki oraz wartość właściwości grid-row-start elementu HTML przypisywanego do miejsca na siatce mają wpływ na to, która linia wierszowa siatki elementu HTML tworzącego układ siatki zostanie wybrana przez przeglądarkę internetową.
- Informacje dodatkowe
-
gdy element HTML posiada określoną przez nas początkową krawędź wierszową miejsca, do którego powinien zostać przypisany, lecz wartością właściwości
grid-row-end
tego elementu HTML jest wartośćauto
, wtedy końcową krawędzią wierszową wspomnianego miejsca staje się następna w kolejności linia wierszowa siatki (gdy element HTML posiada pozycję absolute, wtedy końcową krawędzią wierszową wspomnianego miejsca staje się końcowa krawędź blokowa elementu HTML tworzącego układ siatki)
Przykład
grid-row-end:auto;
Przeglądarka internetowa sama określiła, która linia wierszowa siatki przykładowego elementu "div#gridbox" ma stanowić końcową krawędź wierszową miejsca, do którego został przypisany przykładowy element "div#item".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(6, 70px);
grid-template-columns:repeat(6, 70px);
background-color:#7DCDE8;
}
#item {
font-size:1.3em;
padding:0.5em;
background-color:red;
}
</style>
</head>
<body>
<div id="gridbox">
<div id="item">div#item</div>
</div>
</body>
</html>
numer linii
Wyjaśnienie
Za pomocą właściwości grid-row-end
oraz dowolnej różnej od zera liczby całkowitej możemy określić, która (posiadająca swój numer) linia wierszowa siatki elementu HTML tworzącego układ siatki ma stanowić końcową krawędź wierszową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.
- Wartości ujemne
-
wartości ujemne odwołują się do kolejnych ostatnich linii wierszowych siatki (wartość
-1
wskazuje na ostatnią linię wierszową siatki, wartość-2
wskazuje na przedostatnią linię wierszową siatki itd.)
Przykład
grid-row-end:-2;
Końcową krawędź wierszową miejsca, do którego został przypisany przykładowy element "div#item" stanowi ta linia wierszowa siatki przykładowego elementu "div#gridbox", która jest drugą od końca linią wierszową, ponieważ do wspomnianego elementu "div#item" została dodana właściwość "grid-row-end" wraz z wartością "-2".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(6, 70px);
grid-template-columns:repeat(6, 70px);
background-color:#7DCDE8;
}
#item {
grid-row-start:3;
grid-row-end:-2;
grid-column-start:2;
grid-column-end:-3;
font-size:1.3em;
padding:0.5em;
background-color:red;
}
</style>
</head>
<body>
<div id="gridbox">
<div id="item">div#item</div>
</div>
</body>
</html>
nazwa linii
Wyjaśnienie
Za pomocą właściwości grid-row-end
oraz wybranej nazwy możemy określić, która (posiadająca swoją nazwę) linia wierszowa siatki elementu HTML tworzącego układ siatki ma stanowić końcową krawędź wierszową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.
- Informacje dodatkowe
-
gdy podana przez nas wartość właściwości
grid-row-end
odwołuje się do nieistniejącej nazwy linii wierszowej siatki, wtedy każda następna w kolejności linia wierszowa siatki traktowana jest przez przeglądarkę internetową jako linia posiadająca tę nazwę (linie wierszowe siatki występujące pomiędzy określonym przez nas rozmiarem wysokości wiersza budującego siatkę oraz linie wierszowe siatki znajdujące się w obrębie jakiegokolwiek określonego przez nas obszaru występującego na siatce, nie są brane pod uwagę)
Przykład
grid-row-end:r6;
Końcową krawędź wierszową miejsca, do którego został przypisany przykładowy element "div#item" stanowi ta linia wierszowa siatki przykładowego elementu "div#gridbox", która posiada nazwę "r6", ponieważ do wspomnianego elementu "div#item" została dodana właściwość "grid-row-end" wraz z wartością "r6".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:[r1] 70px [r2] 70px [r3] 70px [r4] 70px [r5] 70px [r6] 70px [r7];
grid-template-columns:[c1] 70px [c2] 70px [c3] 70px [c4] 70px [c5] 70px [c6] 70px [c7];
background-color:#7DCDE8;
}
#item {
grid-row-start:r2;
grid-row-end:r6;
grid-column-start:c3;
grid-column-end:c5;
font-size:1.3em;
padding:0.5em;
background-color:red;
}
</style>
</head>
<body>
<div id="gridbox">
<div id="item">div#item</div>
</div>
</body>
</html>
nazwa krawędzi
Wyjaśnienie
Za pomocą właściwości grid-row-end
oraz wybranej nazwy krawędzi wierszowej istniejącego na siatce obszaru możemy określić, która linia wierszowa siatki elementu HTML tworzącego układ siatki ma stanowić końcową krawędź wierszową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.
Wartość "nazwa krawędzi" ma pierwszeństwo przed wartością nazwa linii.
Przykład
grid-row-end:bb-end;
Końcową krawędź wierszową miejsca, do którego został przypisany przykładowy element "div#item" stanowi ta linia wierszowa siatki przykładowego elementu "div#gridbox", na której znajduje się końcowa krawędź wierszowa "bb-end" obszaru "bb", ponieważ do wspomnianego elementu "div#item" została dodana właściwość "grid-row-end" wraz z wartością "bb-end".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(6, 70px);
grid-template-columns:repeat(6, 70px);
grid-template-areas:'.. .. .. bb bb bb'
'.. .. .. bb bb bb'
'.. .. .. bb bb bb'
'aa aa aa .. .. ..'
'aa aa aa .. .. ..'
'aa aa aa .. .. ..';
background-color:#7DCDE8;
}
#item {
grid-row-start:bb-start;
grid-row-end:bb-end;
grid-column-start:bb-start;
grid-column-end:bb-end;
font-size:1.3em;
padding:0.5em;
background-color:red;
}
</style>
</head>
<body>
<div id="gridbox">
<div id="item">div#item</div>
</div>
</body>
</html>
nazwa obszaru
Wyjaśnienie
Za pomocą właściwości grid-row-end
oraz wybranej nazwy istniejącego na siatce obszaru możemy określić, która linia wierszowa siatki elementu HTML tworzącego układ siatki, na której znajduje się końcowa krawędź wierszowa wspomnianego obszaru ma stanowić końcową krawędź wierszową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.
Wartość "nazwa obszaru" ma pierwszeństwo przed wartością nazwa krawędzi oraz wartością nazwa linii.
Przykład
grid-row-end:bb;
Końcową krawędź wierszową miejsca, do którego został przypisany przykładowy element "div#item" stanowi ta linia wierszowa siatki przykładowego elementu "div#gridbox", na której znajduje się końcowa krawędź wierszowa obszaru "bb", ponieważ do wspomnianego elementu "div#item" została dodana właściwość "grid-row-end" wraz z wartością "bb".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(6, 70px);
grid-template-columns:repeat(6, 70px);
grid-template-areas:'.. .. .. bb bb bb'
'.. .. .. bb bb bb'
'.. .. .. bb bb bb'
'aa aa aa .. .. ..'
'aa aa aa .. .. ..'
'aa aa aa .. .. ..';
background-color:#7DCDE8;
}
#item {
grid-row-start:bb;
grid-row-end:bb;
grid-column-start:bb;
grid-column-end:bb;
font-size:1.3em;
padding:0.5em;
background-color:red;
}
</style>
</head>
<body>
<div id="gridbox">
<div id="item">div#item</div>
</div>
</body>
</html>
pierwszy wzorzec wartości
Wyjaśnienie
Za pomocą właściwości grid-row-end
oraz jednego z góry zdefiniowanych wzorców wartości możemy określić, która linia wierszowa siatki elementu HTML tworzącego układ siatki ma stanowić końcową krawędź wierszową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.
Składniki pierwszego wzorca wartości właściwości grid-row-end
- Przykładowe zapisy
-
2 r2
3 r1
-1 r2
- order
-
Składnik
order
jest wymaganym składnikiem wzorca wartości właściwościgrid-row-end
. Składnikorder
określa, która w kolejności wskazana przez parametr name linia wierszowa siatki elementu HTML tworzącego układ siatki powinna zostać odszukana.- Dostępne wartości
-
dowolna różna od zera liczba całkowita
- Wartości ujemne
-
wartości ujemne odwołują się do ostatniej w kolejności wskazanej przez parametr name linii wierszowej siatki (wartość
-1
odszuka ostatnią w kolejności wskazaną przez parametr name linię wierszową siatki, wartość-2
odszuka przedostatnią w kolejności wskazaną przez parametr name linię wierszową siatki itd.) - Wartość domyślna
-
brak
- name
-
Składnik
name
jest wymaganym składnikiem wzorca wartości właściwościgrid-row-end
. Składnikname
określa nazwę szukanej linii wierszowej siatki elementu HTML tworzącego układ siatki.- Dostępne wartości
-
wyłącznie nazwa linii
- Wartość domyślna
-
brak
Przykład
grid-row-end:3 r2;
Końcową krawędź wierszową miejsca, do którego został przypisany przykładowy element "div#item" stanowi ta linia wierszowa siatki przykładowego elementu "div#gridbox", która jest trzecią w kolejności linią wierszową o nazwie "r2", ponieważ do wspomnianego elementu "div#item" została dodana właściwość "grid-row-end" wraz z następującymi wartościami: "3 r2".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:[r1] 70px [r2] 70px [r1] 70px [r2] 70px [r1] 70px [r2] 70px [r1];
grid-template-columns:[c1] 70px [c2] 70px [c1] 70px [c2] 70px [c1] 70px [c2] 70px [c1];
background-color:#7DCDE8;
}
#item {
grid-row-start:2 r1;
grid-row-end:3 r2;
grid-column-start:2 c1;
grid-column-end:3 c2;
font-size:1.3em;
padding:0.5em;
background-color:red;
}
</style>
</head>
<body>
<div id="gridbox">
<div id="item">div#item</div>
</div>
</body>
</html>
drugi wzorzec wartości
Wyjaśnienie
Za pomocą właściwości grid-row-end
oraz jednego z góry zdefiniowanych wzorców wartości możemy określić, która linia wierszowa siatki elementu HTML tworzącego układ siatki ma stanowić końcową krawędź wierszową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.
Składniki drugiego wzorca wartości właściwości grid-row-end
- Ważne
-
gdy zdecydowaliśmy się skorzystać z danego wzorca wartości, wtedy dla właściwości grid-row-start nie możemy skorzystać z danego wzorca wartości
- Przykładowe zapisy
-
span 2
span r3
span 3 r1
- span
-
Składnik
span
jest wymaganym składnikiem wzorca wartości właściwościgrid-row-end
. Składnikspan
informuje przeglądarkę internetową, że chcemy skorzystać z danego wzorca wartości właściwościgrid-row-end
.- Dostępne wartości
-
słowo kluczowe
span
- Wartość domyślna
-
brak
- number
-
Składnik
number
nie jest zawsze wymaganym składnikiem wzorca wartości właściwościgrid-row-end
. Składniknumber
określa, która w kolejności linia wierszowa siatki elementu HTML tworzącego układ siatki powinna zostać odszukana.- Dostępne wartości
-
dowolna dodatnia liczba całkowita
- Sposób podawania
-
gdy w naszym zapisie nie podaliśmy wartości składnika name, wtedy w naszym zapisie zawsze musimy podać wartość składnika
number
- Informacje dodatkowe
-
odszukiwanie docelowej linii wierszowej siatki elementu HTML tworzącego układ siatki rozpoczyna się od linii wierszowej, na którą wskazuje wartość właściwości grid-row-start elementu HTML, do którego chcemy dodać właściwość
grid-row-end
odszukiwanie docelowej linii wierszowej siatki elementu HTML tworzącego układ siatki odbywa się w kierunku końcowej krawędzi blokowej tego elementu HTML
- Wartość domyślna
-
1
- name
-
Składnik
name
nie jest zawsze wymaganym składnikiem wzorca wartości właściwościgrid-row-end
. Składnikname
określa nazwę szukanej linii wierszowej siatki elementu HTML tworzącego układ siatki.- Dostępne wartości
-
wyłącznie nazwa linii
- Sposób podawania
-
gdy w naszym zapisie nie podaliśmy wartości składnika number, wtedy w naszym zapisie zawsze musimy podać wartość składnika
name
- Wartość domyślna
-
brak
Przykład
grid-row-end:span 2 r2;
Końcową krawędź wierszową miejsca, do którego został przypisany przykładowy element "div#item" stanowi ta linia wierszowa siatki przykładowego elementu "div#gridbox", która jest drugą kolejną linią wierszową o nazwie "r2" licząc od trzeciej linii wierszowej oraz w kierunku końcowej krawędzi blokowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#item" została dodana właściwość "grid-row-start" wraz z wartością "3" oraz właściwość "grid-row-end" wraz z następującymi wartościami: "span 2 r2".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(6, 70px);
grid-template-columns:repeat(6, 70px);
background-color:#7DCDE8;
}
#item {
grid-row-start:3;
grid-row-end:span 2 r2;
grid-column-start:1;
grid-column-end:span 3 c2;
font-size:1.3em;
padding:0.5em;
background-color:red;
}
</style>
</head>
<body>
<div id="gridbox">
<div id="item">div#item</div>
</div>
</body>
</html>