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ści grid-row-end staje się wartość auto

gdy 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

static, relative

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

auto

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości grid-row-end

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

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;
div#item

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;
div#item

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;
div#item

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;
div#item

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;
div#item

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ści grid-row-end. Składnik order 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ści grid-row-end. Składnik name 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;
div#item

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ści grid-row-end. Składnik span informuje przeglądarkę internetową, że chcemy skorzystać z danego wzorca wartości właściwości grid-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ści grid-row-end. Składnik number 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ści grid-row-end. Składnik name 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;
div#item

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>