Ostatnio edytowany:

grid

Autor: Virtual Patriot

Opis 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

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

przeznaczenie
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

Firefox

tak

Nie interpretuje wartości kombinacja składnika auto-columns.

Nie interpretuje wartości kombinacja składnika auto-rows.

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

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

Opis

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:#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>

pierwszy wzorzec wartości

Opis

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

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.

Dostępne wartości

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

Wartość domyślna

brak

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

Dostępne wartości

wartości właściwości grid-auto-columns

Wartość domyślna

auto

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

      #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

Opis

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

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.

Dostępne wartości

wartości właściwości grid-auto-rows

Wartość domyślna

auto

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

Dostępne wartości

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

Sposób podawania

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

Wartość domyślna

brak

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

      #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>