Autor publikacji
Virtual Patriot - Administrator

grid-template

Data publikacji
Ostatnio edytowano

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

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

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

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

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.