Autor publikacji
Virtual Patriot - Administrator

grid-template-rows

Data publikacji
Ostatnio edytowano

Opis 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

Dodatkowe techniczne informacje o właściwości grid-template-rows

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

tak

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

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-template-rows

none

Opis

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

Opis

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

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.

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.

Dodatkowe dostępne wartości składnika size

min-content

Wartość min-content składnika size właściwości grid-template-rows działa na takiej samej zasadzie, jak wartość auto.

max-content

Wartość max-content składnika size właściwości grid-template-rows działa na takiej samej zasadzie, jak wartość auto.

auto

Wartość auto składnika size sprawia, że rozmiar wysokości wiersza budującego siatkę elementu HTML tworzącego układ siatki uzależniony jest od ilości posiadanej treści do wyświetlenia przez dany wiersz.

Dzięki wartości "auto" występujący na osi blokowej elementu HTML tworzącego układ siatki rozmiar wiersza budującego siatkę dodatkowo może zostać rozciągnięty za pomocą wartości stretch właściwości align-content.

grid-template-rows:auto;

wartość auto jako rozmiar wysokości wiersza siatki

fr

Za pomocą specjalnej jednostki fr oraz dowolnej nieujemnej liczby możemy określić rozmiar wysokości wiersza budującego siatkę interesującego nas elementu HTML tworzącego układ siatki.

Wartość wyrażona za pomocą jednostki fr obliczana jest przez przeglądarkę internetową proporcjonalnie na podstawie rozmiaru wolnej przestrzeni, jaki pozostał wzdłuż osi blokowej w obszarze zawartości elementu HTML tworzącego układ siatki. Aby ustalić potrzebną proporcję przeglądarka internetowa bierze pod uwagę tylko te wiersze budujące siatkę, które posiadają rozmiar wysokości wyrażony za pomocą jednostki fr.

grid-template-rows:4fr 3fr 7fr;

wartość wyrażona za pomocą jednostki fr jako rozmiar wysokości wiersza siatki

W ten sposób obliczony przez przeglądarkę internetową rozmiar wysokości jest tylko sugerowanym minimalnym rozmiarem wysokości, co oznacza, że rozmiar ten może zostać dodatkowo pomniejszony lub powiększony, gdy jest to konieczne (np. w sytuacji gdy jeden z wierszy posiada treść niemieszczącą się w ten sposób obliczonym rozmiarze wysokości, wtedy rozmiar wysokości danego wiersza może zostać powiększony, natomiast rozmiar wysokości pozostałych wierszy może zostać równomiernie pomniejszony).

Wartość wyrażona za pomocą jednostki "fr" nie może wystąpić w funkcji calc().

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

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

max

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

fit-content()

Funkcja fit-content() składnika size właściwości grid-template-rows działa na takiej samej zasadzie, jak wartość auto.

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

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.

grid-template-rows:[r1] 80px [r2] 80px [r3] 80px [r4] 80px [r5] 80px [r6] 80px [r7];

schemat tworzenia nazw linii wierszowych oraz rozmiaru wysokości poszczególnych wierszy budujących siatkę

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

Opis

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 drugiego wzorca wartości właściwości grid-template-rows

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

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.

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.

Dodatkowe dostępne wartości składnika size

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

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

max

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

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

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.

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()

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

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.

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.

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>