Autor publikacji: Virtual Patriot - Administrator

grid

Data publikacji: Listopad 16 2017
Ostatnio edytowano: Wrzesień 07 2020

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

Przeznaczenie właściwości `grid`

Za pomocą właściwości grid 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`

przeznaczenie

element HTML typu grid
element HTML typu inline-grid

pozycja

dowolna

dziedziczenie

nie

wartość initial

teoretycznie none none none auto auto row 0 0

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości `grid`

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

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

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

wartość właściwości grid-template

Wyjaśnienie

Za pomocą właściwości grid oraz wybranej wartości 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.

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

/* REGUŁA - 1 */
div {
  grid:[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;
  grid-auto-rows:auto;
  grid-auto-columns:auto;
  grid-auto-flow:row;
  grid-row-gap:0;
  grid-column-gap:0;
}

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

/* REGUŁA - 1 */
div {
  grid:[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';
  grid-auto-rows:auto;
  grid-auto-columns:auto;
  grid-auto-flow:row;
  grid-row-gap:0;
  grid-column-gap:0;
}

Korzystając z właściwości "grid" oraz wybranej wartości właściwości grid-template nie możemy zmienić wartości właściwości grid-auto-rows, grid-auto-columns, grid-auto-flow, grid-row-gap oraz grid-column-gap. Wartości wspomnianych właściwości CSS są automatycznie ustawiane przez przeglądarkę internetową na wartość domyślną.

Przykład

grid:[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" 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:[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>

pierwszy wzorzec wartości

Wyjaśnienie

Za pomocą właściwości grid oraz jednego z góry zdefiniowanych wzorców 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:[r1] 100px [r2] 50px [r3] /auto-flow dense 75px;
}

/* REGUŁA - 2 */
div {
  grid-template-rows:[r1] 100px [r2] 50px [r3];
  grid-template-columns:none;
  grid-template-areas:none;
  grid-auto-rows:auto;
  grid-auto-columns:75px;
  grid-auto-flow:column dense;
  grid-row-gap:0;
  grid-column-gap:0;
}

Korzystając z pierwszego wzorca wartości właściwości "grid" nie możemy zmienić wartości właściwości grid-template-columns, grid-template-areas, grid-auto-rows, grid-row-gap oraz grid-column-gap. Wartości wspomnianych właściwości CSS są automatycznie ustawiane przez przeglądarkę internetową na wartość domyślną. Ponadto wartością składnika orientation wzorca wartości właściwości grid-auto-flow jest zawsze wartość column.

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

            template-rows /auto-flow auto-columns

Przykładowe zapisy

[r1] 150px [r2] /auto-flow

[r1] 150px [r2] 50px [r3] /auto-flow dense

repeat(5, [r] 100px) [r] /auto-flow 50px

[x1] 30% [x2] 70% [x3] /auto-flow dense 50px 100px

template-rows

Składnik template-rows jest wymaganym składnikiem wzorca wartości właściwości grid. Składnik template-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.

/auto-flow

Składnik auto-flow jest wymaganym składnikiem wzorca wartości właściwości grid. Składnik auto-flow informuje przeglądarkę internetową, że chcemy skorzystać z pierwszego wzorca wartości właściwości grid.

Dostępne wartości

słowo kluczowe auto-flow

Sposób podawania

przed wartością składnika auto-flow należy umieścić znak /

ponadto jeżeli chcemy, aby wartość właściwości grid-auto-flow zawierała w sobie słowo kluczowe dense, wtedy po słowie kluczowym auto-flow należy podać słowo kluczowe dense, a oba słowa kluczowe należy oddzielić od siebie przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji)

Wartość domyślna

brak

auto-columns

Składnik auto-columns nie jest wymaganym składnikiem wzorca wartości właściwości grid. Składnik auto-columns określa wartość właściwości grid-auto-columns, czyli domyślny rozmiar szerokości wszystkich kolumn budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Przykład

  grid:repeat(6, 50px) /auto-flow 75px;

div-1

div-2

div-3

div-4

div-5

Rozmiar wysokości poszczególnych wierszy budujących siatkę przykładowego elementu "div#gridbox" wynosi 50 pikseli, ponadto domyślny rozmiar szerokości wszystkich kolumn budujących siatkę przykładowego elementu "div#gridbox" wynosi 75 pikseli, dodatkowo domyślnym sposobem układania się czwartego oraz piątego elementu "div" należącego do siatki przykładowego elementu "div#gridbox" jest sposób kolumnowy, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid" wraz z następującymi wartościami: "repeat(6, 50px) /auto-flow 75px".

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:repeat(6, 50px) /auto-flow 75px;
        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:3;
        grid-column-end:7;
        background-color:red;
      }

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

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

      #gridbox > :nth-child(4) {
        background-color:pink;
      }

      #gridbox > :nth-child(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>

drugi wzorzec wartości

Wyjaśnienie

Za pomocą właściwości grid oraz jednego z góry zdefiniowanych wzorców 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:auto-flow dense 50px /[c1] 40px [c2] 120px [c3];
}

/* REGUŁA - 2 */
div {
  grid-template-rows:none;
  grid-template-columns:[c1] 40px [c2] 120px [c3];
  grid-template-areas:none;
  grid-auto-rows:50px;
  grid-auto-columns:auto;
  grid-auto-flow:row dense;
  grid-row-gap:0;
  grid-column-gap:0;
}

Korzystając z drugiego wzorca wartości właściwości "grid" nie możemy zmienić wartości właściwości grid-template-rows, grid-template-areas, grid-auto-columns, grid-row-gap oraz grid-column-gap. Wartości wspomnianych właściwości CSS są automatycznie ustawiane przez przeglądarkę internetową na wartość domyślną. Ponadto wartością składnika orientation wzorca wartości właściwości grid-auto-flow jest zawsze wartość row.

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

            auto-flow auto-rows /template-columns

Przykładowe zapisy

auto-flow /[c1] 150px [c2]

auto-flow dense /[c1] 150px [c2] 50px [c3]

auto-flow 50px /repeat(5, [c] 100px) [c]

auto-flow dense 50px 100px /[y1] 30% [y2] 70% [y3]

auto-flow

Składnik auto-flow jest wymaganym składnikiem wzorca wartości właściwości grid. Składnik auto-flow informuje przeglądarkę internetową, że chcemy skorzystać z drugiego wzorca wartości właściwości grid.

Dostępne wartości: słowo kluczowe auto-flow
Sposób podawania: jeżeli chcemy, aby wartość właściwości grid-auto-flow zawierała w sobie słowo kluczowe dense, wtedy po słowie kluczowym auto-flow należy podać słowo kluczowe dense, a oba słowa kluczowe należy oddzielić od siebie przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji)
Wartość domyślna: brak

auto-rows

Składnik auto-rows nie jest wymaganym składnikiem wzorca wartości właściwości grid. Składnik auto-rows określa wartość właściwości grid-auto-rows, czyli domyślny rozmiar wysokości wszystkich wierszy budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

/template-columns

Składnik template-columns jest wymaganym składnikiem wzorca wartości właściwości grid. Składnik template-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:auto-flow 50px /repeat(6, 75px);

div-1

div-2

div-3

div-4

div-5

Rozmiar szerokości poszczególnych kolumn budujących siatkę przykładowego elementu "div#gridbox" wynosi 75 pikseli, ponadto domyślny rozmiar wysokości wszystkich wierszy budujących siatkę przykładowego elementu "div#gridbox" wynosi 50 pikseli, dodatkowo domyślnym sposobem układania się czwartego oraz piątego elementu "div" należącego do siatki przykładowego elementu "div#gridbox" jest sposób wierszowy, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid" wraz z następującymi wartościami: "auto-flow 50px /repeat(6, 75px)".

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:auto-flow 50px /repeat(6, 75px);
        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:3;
        grid-column-end:7;
        background-color:red;
      }

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

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

      #gridbox > :nth-child(4) {
        background-color:pink;
      }

      #gridbox > :nth-child(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>