Autor publikacji: Virtual Patriot - Administrator

grid-template-rows

Data publikacji: Listopad 16 2017
Ostatnio edytowano: Grudzień 28 2024

Zobacz również: w3.org - grid-template-rows property (LV1)

Przeznaczenie właściwości `grid-template-rows`

Za pomocą właściwości grid-template-rows możemy określić nazwy poszczególnych linii wierszowych budujących siatkę interesującego nas elementu HTML tworzącego układ siatki, jak również możemy określić rozmiar wysokości poszczególnych wierszy budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Informacje dodatkowe: każda wysokość związana z właściwością grid-template-rows tyczy się wysokości logicznej

Informacje techniczne o właściwości `grid-template-rows`

przeznaczenie

element HTML typu grid
element HTML typu inline-grid

dowolna

nie

brak

tak

Interpretacja właściwości `grid-template-rows`

: tak
: tak
: tak
: tak
: nie
: tak

Zobacz więcej informacji o interpretacji właściwości grid-template-rows.

Opis wartości właściwości `grid-template-rows`

none

Wyjaśnienie

Wartość none jest domyślną wartością właściwości grid-template-rows.

Domyślnie poszczególne linie wierszowe budujące siatkę elementu HTML tworzącego układ siatki nie posiadają swoich nazw, ponadto rozmiar wysokości poszczególnych wierszy budujących siatkę elementu HTML tworzącego układ siatki uzależniony jest od wartości właściwości grid-auto-rows.

Przykład

  grid-template-rows:none;

div-1

div-2

div-3

div-4

div-5

Poszczególne linie wierszowe budujące siatkę przykładowego elementu "div#gridbox" nie posiadają swoich nazw, ponadto poszczególne wiersze budujące siatkę przykładowego elementu "div#gridbox" posiadają automatyczny rozmiar wysokości.

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;
        background-color:#7DCDE8;
      }

      #gridbox > div {
        padding:0.5em;
        font-size:1.3em;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:5;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        grid-row-start:1;
        grid-row-end:5;
        grid-column-start:5;
        grid-column-end:7;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:5;
        grid-row-end:7;
        grid-column-start:3;
        grid-column-end:7;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:3;
        grid-row-end:7;
        grid-column-start:1;
        grid-column-end:3;
        background-color:pink;
      }

      #gridbox > :nth-child(5) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:gold;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
      <div>div-5</div>
    </div>

  </body>
</html>

pierwszy wzorzec wartości

Wyjaśnienie

Za pomocą właściwości grid-template-rows oraz jednego z góry zdefiniowanych wzorców wartości możemy określić nazwy poszczególnych linii wierszowych budujących siatkę interesującego nas elementu HTML tworzącego układ siatki, jak również możemy określić rozmiar wysokości poszczególnych wierszy budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Składniki pierwszego wzorca wartości właściwości `grid-template-rows`

            name size name

Ważne

możemy podać więcej par składników name size, dzięki czemu kolejne linie wierszowe budujące siatkę elementu HTML tworzącego układ siatki mogą posiadać swoją nazwę, a kolejne wiersze budujące siatkę elementu HTML tworzącego układ siatki mogą posiadać określony rozmiar wysokości

Informacje dodatkowe

domyślnie każda linia wierszowa budująca siatkę elementu HTML tworzącego układ siatki posiada swój własny numer (pierwsza linia wierszowa posiada numer 1, druga linia wierszowa posiada numer 2 itd.)

jedną z osi, jaką posiada każdy element HTML, jest oś blokowa. Oś blokowa ma swój początek przy początkowej krawędzi blokowej elementu HTML, a koniec przy końcowej krawędzi blokowej elementu HTML.

linie wierszowe budujące siatkę elementu HTML tworzącego układ siatki układają się w obszarze zawartości tego elementu HTML (jedna po drugiej w szeregu od początkowej krawędzi blokowej do końcowej krawędzi blokowej)

do między innymi numeru linii wierszowej siatki lub nazwy linii wierszowej siatki możemy odwołać się w konkretnym celu za pomocą następujących właściwości CSS: grid-row-start, grid-row-end, grid-row, grid-area

Przykładowe zapisy

150px 200px 250px

[r1] 150px [r2] 30% [r3] 100px [r4]

[r1 x1] min-content [r2 x2] max-content [r3 x3]

[r1] 100px [r2] 1fr [r3] 2fr [r4]

[x1] 200px [x2] auto [x3]

[x1] minmax(auto, 300px) [x2] fit-content(400px) [x3]

repeat(5, 100px)

repeat(7, [r] auto [x])

repeat(10, [r] 10%) [r]

[r] repeat(3, 200px [r])

name

Składnik name nie jest wymaganym składnikiem wzorca wartości właściwości grid-template-rows. Składnik name określa nazwę linii wierszowej budującej siatkę interesującego nas elementu HTML tworzącego układ siatki.

Dostępne wartości: wartość własna (dodatkowo z wyłączeniem wartości span)
Sposób podawania: wybraną nazwę należy podać pomiędzy nawiasem kwadratowym [], ponadto jeżeli z jakiegoś powodu chcemy, aby dana linia wierszowa budująca siatkę elementu HTML tworzącego układ siatki posiadała więcej niż jedną nazwę, wtedy do danego nawiasu kwadratowego należy dodać kolejną nazwę (wszystkie nazwy należy oddzielić od siebie przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji))
Wartość domyślna: brak

size

Składnik size jest wymaganym składnikiem wzorca wartości właściwości grid-template-rows. Składnik size określa rozmiar wysokości wiersza budującego siatkę interesującego nas elementu HTML tworzącego układ siatki.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru wysokości obszaru zawartości elementu HTML tworzącego układ siatki

Dla zaawansowanych

gdy rozmiar wysokości obszaru zawartości elementu HTML tworzącego układ siatki uzależniony jest wyłącznie od rozmiaru wysokości wierszy budujących siatkę, wtedy wartości procentowe działają na takiej samej zasadzie, jak wartość auto

sytuacje, gdy rozmiar wysokości obszaru zawartości elementu HTML tworzącego układ siatki uzależniony jest wyłącznie od rozmiaru wysokości wierszy budujących siatkę:

gdy element HTML tworzący układ siatki jest typu inline-grid oraz nie posiada w żaden sposób ustalonego stałego rozmiaru wysokości obszaru zawartości
gdy element HTML tworzący układ siatki jest pływającym elementem HTML oraz nie posiada w żaden sposób ustalonego stałego rozmiaru wysokości obszaru zawartości
gdy element HTML tworzący układ siatki posiada pozycję absolute lub pozycję fixed oraz nie posiada w żaden sposób ustalonego stałego rozmiaru wysokości obszaru zawartości

Wartość domyślna

brak

wartość auto jako rozmiar wysokości wiersza siatki — `grid-template-rows:auto;`

wartość wyrażona za pomocą jednostki fr jako rozmiar wysokości wiersza siatki — `grid-template-rows:auto;`

schemat tworzenia nazw linii wierszowych oraz rozmiaru wysokości poszczególnych wierszy budujących siatkę — `grid-template-rows:[r1] 80px [r2] 80px [r3] 80px [r4] 80px [r5] 80px [r6] 80px [r7];`

Przykład

  grid-template-rows:[r1] 40px [r2] 60px [r3] 45px [r4] 65px [r5] 50px [r6] 70px [r7];

div-1

div-2

div-3

div-4

div-5

Nazwami poszczególnych linii wierszowych budujących siatkę przykładowego elementu "div#gridbox" są kolejno nazwy: "r1", "r2", "r3", "r4", "r5", "r6", "r7", ponadto rozmiar wysokości poszczególnych wierszy budujących siatkę przykładowego elementu "div#gridbox" kolejno wynosi: 40 pikseli, 60 pikseli, 45 pikseli, 65 pikseli, 50 pikseli, 70 pikseli, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid-template-rows" wraz z następującymi wartościami: "[r1] 40px [r2] 60px [r3] 45px [r4] 65px [r5] 50px [r6] 70px [r7]".

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] 40px [r2] 60px [r3] 45px [r4] 65px [r5] 50px [r6] 70px [r7];
        grid-template-columns:[c1] 60px [c2] 70px [c3] 65px [c4] 75px [c5] 70px [c6] 80px [c7];
        background-color:#7DCDE8;
      }

      #gridbox > div {
        padding:0.5em;
        font-size:1.3em;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:r1;
        grid-row-end:r3;
        grid-column-start:c1;
        grid-column-end:c5;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        grid-row-start:r1;
        grid-row-end:r5;
        grid-column-start:c5;
        grid-column-end:c7;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:r5;
        grid-row-end:r7;
        grid-column-start:c3;
        grid-column-end:c7;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:r3;
        grid-row-end:r7;
        grid-column-start:c1;
        grid-column-end:c3;
        background-color:pink;
      }

      #gridbox > :nth-child(5) {
        grid-row-start:r3;
        grid-row-end:r5;
        grid-column-start:c3;
        grid-column-end:c5;
        background-color:gold;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
      <div>div-5</div>
    </div>

  </body>
</html>

drugi wzorzec wartości

Wyjaśnienie

Składniki drugiego wzorca wartości właściwości `grid-template-rows`

            name size name auto-repeat name size name

Ważne

Informacje dodatkowe

Przykładowe zapisy

50px repeat(auto-fill, 100px)

10% repeat(auto-fit, 20%) 10%

[r1] 150px [r2] 200px [r3] repeat(auto-fill, [x] 50px)

repeat(auto-fit, [x] 50px) [x]

repeat(4, 50px) repeat(auto-fill, 100px) repeat(2, 75px)

minmax(50px, max-content) repeat(auto-fit, 50px)

repeat(auto-fit, 50px) minmax(min-content, 150px)

[r1] 50px [r2] repeat(auto-fit, 50px) minmax(min-content, 150px)

repeat(auto-fill, [r] minmax(100px, 1fr) [x] 50px) [r] 50px [x]

name

Dostępne wartości: wartość własna (dodatkowo z wyłączeniem wartości span)
Sposób podawania: wybraną nazwę należy podać pomiędzy nawiasem kwadratowym [], ponadto jeżeli z jakiegoś powodu chcemy, aby dana linia wierszowa budująca siatkę elementu HTML tworzącego układ siatki posiadała więcej niż jedną nazwę, wtedy do danego nawiasu kwadratowego należy dodać kolejną nazwę (wszystkie nazwy należy oddzielić od siebie przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji))
Wartość domyślna: brak

size

Składnik size nie jest zawsze wymaganym składnikiem wzorca wartości właściwości grid-template-rows. Składnik size określa rozmiar wysokości wiersza budującego siatkę interesującego nas elementu HTML tworzącego układ siatki.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty

Sposób podawania

gdy w naszym zapisie chcemy określić wartość składnika name, wtedy w naszym zapisie musimy również określić wartość składnika size

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru wysokości obszaru zawartości elementu HTML tworzącego układ siatki

Dla zaawansowanych

sytuacje, gdy rozmiar wysokości obszaru zawartości elementu HTML tworzącego układ siatki uzależniony jest wyłącznie od rozmiaru wysokości wierszy budujących siatkę:

gdy element HTML tworzący układ siatki jest typu inline-grid oraz nie posiada w żaden sposób ustalonego stałego rozmiaru wysokości obszaru zawartości
gdy element HTML tworzący układ siatki jest pływającym elementem HTML oraz nie posiada w żaden sposób ustalonego stałego rozmiaru wysokości obszaru zawartości
gdy element HTML tworzący układ siatki posiada pozycję absolute lub pozycję fixed oraz nie posiada w żaden sposób ustalonego stałego rozmiaru wysokości obszaru zawartości

Wartość domyślna

brak

Dodatkowe dostępne wartości składnika `size`

                  minmax(), repeat()

minmax()

Za pomocą specjalnej funkcji minmax() możemy określić przedział wartości, jaki może posiadać rozmiar wysokości wiersza budującego siatkę interesującego nas elementu HTML tworzącego układ siatki.

Parametry funkcji `minmax()`

                        min, max

min

Parametr min jest wymaganym parametrem funkcji minmax(). Parametr min określa wartość minimalną przedziału wartości.

Dostępne wartości: dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty (jak również wartość min-content, max-content lub wartość auto, jednak tylko wtedy, gdy wartością składnika max jest dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty)
Wartość domyślna: brak

max

Parametr max jest wymaganym parametrem funkcji minmax(). Parametr max określa wartość maksymalną przedziału wartości.

Dostępne wartości: dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty (jak również dowolna nieujemna liczba wraz z jednostką fr lub wartość min-content, max-content lub wartość auto, jednak tylko wtedy, gdy wartością składnika min jest dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty)
Informacje dodatkowe: jeżeli podana przez nas wartość parametru max okaże się mniejsza od podanej przez nas wartości parametru min, wtedy wartość parametru max jest ignorowana
Wartość domyślna: brak

repeat()

Za pomocą specjalnej funkcji repeat() możemy określić rozmiar wysokości poszczególnych wierszy budujących siatkę interesującego nas elementu HTML tworzącego układ siatki. Dodatkowo możemy określić nazwy poszczególnych linii wierszowych budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Parametry funkcji `repeat()`

                        number, pattern

number

Parametr number jest wymaganym parametrem funkcji repeat(). Parametr number określa ilość powtórzeń parametru pattern w celu uzyskania ostatecznej wartości.

pattern

Parametr pattern jest wymaganym parametrem funkcji repeat(). Parametr pattern określa wzorzec, który powinien zostać powtórzony ilość razy, na którą wskazuje wartość parametru number.

Dostępne wartości

drugi wzorzec wartości (lecz w tym wypadku wyłącznie zapis name size name)

Informacje dodatkowe

w podanym przez nas wzorcu nie może wystąpić funkcja repeat()

gdy w podanym przez nas zapisie wartość parametru number jest większa od wartości 1 oraz gdy pierwszą oraz ostatnią wartością wzorca jest wartość określająca nazwę linii wierszowej, wtedy obie wspomniane nazwy będą dotyczyły jednej i tej samej kolejnej linii wierszowej (przykładowo zapis repeat(2, [r1] 100px [r2]) będzie równoznaczny z wartością [r1] 100px [r2 r1] 100px [r2])

Wartość domyślna

brak

auto-repeat

Składnik auto-repeat jest wymaganym składnikiem wzorca wartości właściwości grid-template-rows. Składnik auto-repeat określa automatyczny sposób wypełnienia wierszami rozmiaru wysokości wolnej przestrzeni obszaru zawartości interesującego nas elementu HTML tworzącego układ siatki.

Dostępne wartości składnika `auto-repeat`

                  repeat()

repeat()

Za pomocą specjalnej funkcji repeat() możemy określić kilka cech automatycznego sposobu wypełnienia wierszami rozmiaru wysokości wolnej przestrzeni obszaru zawartości interesującego nas elementu HTML tworzącego układ siatki.

Parametry funkcji `repeat()`

                        auto-mode, pattern

auto-mode

Parametr auto-mode jest wymaganym parametrem funkcji repeat(). Parametr auto-mode określa tryb automatycznego sposobu wypełnienia wierszami rozmiaru wysokości wolnej przestrzeni obszaru zawartości interesującego nas elementu HTML tworzącego układ siatki.

Dostępne wartości

wartość auto-fill lub wartość auto-fit

Informacje dodatkowe

wartość auto-fill sprawia, że rozmiar wysokości wolnej przestrzeni obszaru zawartości elementu HTML tworzącego układ siatki zostanie wypełniony wierszami (utworzonymi na podstawie wartości parametru pattern) taką ilość razy, aby nie spowodować przepełnienia elementu HTML tworzącego dany układ siatki

wartość auto-fit sprawia, że rozmiar wysokości wolnej przestrzeni obszaru zawartości elementu HTML tworzącego układ siatki zostanie wypełniony wierszami (utworzonymi na podstawie wartości parametru pattern) taką ilość razy, aby nie spowodować przepełnienia elementu HTML tworzącego dany układ siatki, dodatkowo rozmiar wysokości w ten sposób utworzonych wierszy, do których nie został przypisany żaden element HTML, zostanie zmniejszony do zera

Wartość domyślna

1

pattern

Parametr pattern jest wymaganym parametrem funkcji repeat(). Parametr pattern określa wzorzec, który powinien zostać powtórzony ilość razy, na którą wskazuje wartość parametru auto-mode.

Dostępne wartości: drugi wzorzec wartości (lecz w tym wypadku wyłącznie zapis name size name)
Informacje dodatkowe: w podanym przez nas wzorcu nie może wystąpić funkcja repeat()
Wartość domyślna: brak

Przykład

  grid-template-rows:repeat(auto-fill, 60px);

div-1

div-2

div-3

div-4

div-5

Wierszami budującymi siatkę przykładowego elementu "div#gridbox" są wiersze o rozmiarze wysokości równym 60 pikseli, wspomniane wiersze wypełniają rozmiar wysokości wolnej przestrzeni obszaru zawartości przykładowego elementu "div#gridbox", ponadto poszczególne linie wierszowe budujące siatkę przykładowego elementu "div#gridbox" nie posiadają swoich nazw, ponieważ do wspomnianego elementu "div" została dodana właściwość "grid-template-rows" wraz z wartością w postaci funkcji "repeat()", w której to funkcji zostały użyte następujące wartości: "auto-fill, 60px".

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(auto-fill, 60px);
        grid-template-columns:repeat(auto-fill, 70px);
        width:460px;
        height:400px;
        background-color:#7DCDE8;
      }

      #gridbox > div {
        padding:0.5em;
        font-size:1.3em;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        grid-row-start:2;
        grid-row-end:6;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:3;
        grid-row-end:7;
        grid-column-start:5;
        grid-column-end:7;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:1;
        grid-row-end:2;
        grid-column-start:5;
        grid-column-end:7;
        background-color:pink;
      }

      #gridbox > :nth-child(5) {
        grid-row-start:6;
        grid-row-end:7;
        grid-column-start:1;
        grid-column-end:3;
        background-color:gold;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
      <div>div-5</div>
    </div>

  </body>
</html>