Autor publikacji: Virtual Patriot - Administrator

grid-template

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

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

Przeznaczenie 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

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

przeznaczenie

element HTML typu grid
element HTML typu inline-grid

dowolna

nie

none none none

brak

tak (animacja schodkowa)

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

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

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

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

grupa wartości

Wyjaśnienie

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`

            rows /columns

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.

/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.

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

Wyjaśnienie

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`

            name area size name /columns

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.

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.

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.

/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.

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

      #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

Wyjaśnienie

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.