Ostatnio edytowany:

grid-template

Autor: Virtual Patriot

Opis właściwości grid-template

Za pomocą właściwości grid-template możemy określić kilka różnych cech siatki interesującego nas elementu HTML tworzącego układ siatki.

Informacje dodatkowe

brak

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

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

none none none

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości grid-template

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

grupa wartości

Opis

Za pomocą właściwości grid-template oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech siatki interesującego nas elementu HTML tworzącego układ siatki.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  grid-template:[r1] 250px [r2] /[c1] 150px [c2] 300px [c3];
}

/* REGUŁA - 2 */
div {
  grid-template-rows:[r1] 250px [r2];
  grid-template-columns:[c1] 150px [c2] 300px [c3];
  grid-template-areas:none;
}

Wartością właściwości grid-template-areas w grupie wartości właściwości "grid-template" jest zawsze wartość none.

Składniki grupy wartości właściwości grid-template

Ważne

podana przez nas grupa wartości właściwości grid-template nie może zawierać wartości globalnych

Przykładowe zapisy

100px 150px /200px 50px 100px

[r1] 200px [r2] /[c1] 150px [c2] 300px [c3]

200px /35% 1fr 2fr

repeat(3, 150px) /max-content min-content 200px

rows

Składnik rows jest wymaganym składnikiem grupy wartości właściwości grid-template. Składnik rows określa wartość właściwości grid-template-rows, czyli nazwy poszczególnych linii wierszowych budujących siatkę interesującego nas elementu HTML tworzącego układ siatki, jak również rozmiar wysokości poszczególnych wierszy budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Wartość domyślna

none

/columns

Składnik columns jest wymaganym składnikiem grupy wartości właściwości grid-template. Składnik columns określa wartość właściwości grid-template-columns, czyli nazwy poszczególnych linii kolumnowych budujących siatkę interesującego nas elementu HTML tworzącego układ siatki, jak również rozmiar szerokości poszczególnych kolumn budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Sposób podawania

przed wartością składnika columns należy umieścić znak /

Wartość domyślna

none

Przykład

  grid-template:[r1] 40px [r2] 60px [r3] 45px [r4] 65px [r5] 50px [r6] 70px [r7] /[c1] 60px [c2] 70px [c3] 65px [c4] 75px [c5] 70px [c6] 80px [c7];
div-1
div-2
div-3
div-4

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, natomiast nazwami poszczególnych linii kolumnowych budujących siatkę przykładowego elementu "div#gridbox" są kolejno nazwy: "c1", "c2", "c3", "c4", "c5", "c6", "c7", ponadto rozmiar szerokości poszczególnych kolumn budujących siatkę przykładowego elementu "div#gridbox" kolejno wynosi: 60 pikseli, 70 pikseli, 65 pikseli, 75 pikseli, 70 pikseli, 80 pikseli, dodatkowo na siatce przykładowego elementu "div#gridbox" nie występują żadne obszary posiadające swoją nazwę, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid-template" wraz z następującą grupą wartości: "[r1] 40px [r2] 60px [r3] 45px [r4] 65px [r5] 50px [r6] 70px [r7] /[c1] 60px [c2] 70px [c3] 65px [c4] 75px [c5] 70px [c6] 80px [c7]".

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

      #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;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

wzorzec wartości

Opis

Za pomocą właściwości grid-template oraz z góry zdefiniowanego wzorca wartości możemy określić kilka różnych cech siatki interesującego nas elementu HTML tworzącego układ siatki.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  grid-template:[r1] 'aa aa' 180px
                [r2] 'bb ..' 140px
                [r3] 'bb cc' 100px [r4]
                /[c1] 150px [c2] 250px [c3];
}

/* REGUŁA - 2 */
div {
  grid-template-rows:[r1] 180px [r2] 140px [r3] 100px [r4];
  grid-template-columns:[c1] 150px [c2] 250px [c3];
  grid-template-areas:'aa aa'
                      'bb ..'
                      'bb cc';
}

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

Ważne

we wzorcu wartości właściwości grid-template nie może wystąpić funkcja repeat()

możemy podać kilka kombinacji wartości składników name area size name. Każdą kombinację wartości składników name area size name należy oddzielić od siebie przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji). Każda kolejna kombinacja wartości składników name area size name jest informacją dla przeglądarki internetowej o cechach kolejnego wiersza budującego siatkę elementu HTML tworzącego układ siatki.

gdy w naszym zapisie kombinacji wartości składników name area size name bezpośrednio po sobie wystąpią dwa składniki name, wtedy dana linia wierszowa budująca siatkę elementu HTML tworzącego układ siatki będzie posiadała wszystkie nazwy należące do obu wspomnianych składników name (przykładowo zapis [r1] 'aa' [r2] [x1] 'bb' [r3] będzie równoznaczny z wartością [r1] 'aa' [r2 x1] 'bb' [r3])

Przykładowe zapisy

'aa bb'

'aa bb' 250px

[r1] 'aa bb' 250px [r2]

[r1] 'aa bb' 250px [r2] /[c1] 120px [c2] 170px [c3]

'aa aa'
'bb cc'

'aa aa' 150px
'bb cc' 200px

[r1] 'aa aa' 150px
[r2] 'bb cc' 200px [r3]

[r1] 'aa aa' 150px
[r2] 'bb cc' 200px [r3]
/[c1] 120px [c2] 170px [c3]

name

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

Dostępne wartości

wartości składnika name wzorca wartości właściwości grid-template-rows

Wartość domyślna

brak

area

Składnik area jest wymaganym składnikiem wzorca wartości właściwości grid-template. Składnik area określa wartość składnika area wzorca wartości właściwości grid-template-areas, czyli nazwę obszaru, który chcemy, aby występował na siatce interesującego nas elementu HTML tworzącego układ siatki.

Dostępne wartości

wartości składnika area wzorca wartości właściwości grid-template-areas

Wartość domyślna

brak

size

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

Dostępne wartości

wartości składnika size pierwszego wzorca wartości właściwości grid-template-rows

Wartość domyślna

auto

/columns

Składnik columns nie jest wymaganym składnikiem wzorca wartości właściwości grid-template. Składnik columns określa wartość właściwości grid-template-columns, czyli nazwy poszczególnych linii kolumnowych budujących siatkę interesującego nas elementu HTML tworzącego układ siatki, jak również rozmiar szerokości poszczególnych kolumn budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Sposób podawania

przed wartością składnika columns należy umieścić znak /

Wartość domyślna

none

Przykład

grid-template:[r1] 'aa aa aa aa bb bb' 40px
               [r2] 'aa aa aa aa bb bb' 60px 
               [r3] 'dd dd .. .. bb bb' 45px 
               [r4] 'dd dd .. .. bb bb' 65px 
               [r5] 'dd dd cc cc cc cc' 50px 
                    [r6] 'dd dd cc cc cc cc' 70px [r7] 
                     /[c1] 60px [c2] 70px [c3] 65px [c4] 75px [c5] 70px [c6] 80px [c7];
div-1
div-2
div-3
div-4

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, natomiast nazwami poszczególnych linii kolumnowych budujących siatkę przykładowego elementu "div#gridbox" są kolejno nazwy: "c1", "c2", "c3", "c4", "c5", "c6", "c7", ponadto rozmiar szerokości poszczególnych kolumn budujących siatkę przykładowego elementu "div#gridbox" kolejno wynosi: 60 pikseli, 70 pikseli, 65 pikseli, 75 pikseli, 70 pikseli, 80 pikseli, dodatkowo na siatce przykładowego elementu "div#gridbox" występują cztery obszary posiadające swoją nazwę ("aa", "bb", "cc", "dd") oraz jeden obszar nieposiadający swojej nazwy, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid-template" wraz z następującymi wartościami: "[r1] 'aa aa aa aa bb bb' 40px [r2] 'aa aa aa aa bb bb' 60px [r3] 'dd dd .. .. bb bb' 45px [r4] 'dd dd .. .. bb bb' 65px [r5] 'dd dd cc cc cc cc' 50px [r6] 'dd dd cc cc cc cc' 70px [r7] /[c1] 60px [c2] 70px [c3] 65px [c4] 75px [c5] 70px [c6] 80px [c7]".

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:[r1] 'aa aa aa aa bb bb' 40px
                      [r2] 'aa aa aa aa bb bb' 60px
                      [r3] 'dd dd .. .. bb bb' 45px
                      [r4] 'dd dd .. .. bb bb' 65px
                      [r5] 'dd dd cc cc cc cc' 50px
                      [r6] 'dd dd cc cc cc cc' 70px [r7]
                      /[c1] 60px [c2] 70px [c3] 65px [c4] 75px [c5] 70px [c6] 80px [c7];
        background-color:#CBFFFF;
      }

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

      #gridbox > :nth-child(1) {
        grid-area:aa;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        grid-area:bb;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-area:cc;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-area:dd;
        background-color:pink;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

none

Opis

Za pomocą wartości none właściwości grid-template możemy sprawić, że do interesującego nas elementu HTML tworzącego układ siatki zostanie dodana właściwość grid-template wraz z grupą wartości none none none.