Ostatnio edytowany:

grid-area

Autor: Virtual Patriot

Opis właściwości grid-area

Za pomocą właściwości grid-area możemy określić, które linie wierszowe i kolumnowe siatki elementu HTML tworzącego układ siatki mają stanowić początkową oraz końcową krawędź wierszową i kolumnową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.

Informacje dodatkowe

brak

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

przeznaczenie
  • element dziecko elementu HTML typu grid
  • element dziecko elementu HTML typu inline-grid
pozycja

static, relative

Właściwość "grid-area" oddziałuje również na element HTML posiadający pozycję absolute, lecz tylko wtedy, gdy elementem HTML (względem którego odbywa się pozycjonowanie danego elementu HTML posiadającego pozycję absolute) jest element HTML typu grid lub inline-grid. W tym wypadku przeznaczeniem właściwości "grid-area" jest również element potomek elementu HTML typu grid lub inline-grid.

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości grid-area

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

grupa wartości

Opis

Za pomocą właściwości grid-area oraz z góry zdefiniowanej grupy wartości możemy określić, które linie wierszowe i kolumnowe siatki elementu HTML tworzącego układ siatki mają stanowić początkową oraz końcową krawędź wierszową i kolumnową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.

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

/* REGUŁA - 1 */
div {
  grid-area:2 /3 /r6 /c7;
}

/* REGUŁA - 2 */
div {
  grid-row-start:2;
  grid-column-start:3;
  grid-row-end:r6;
  grid-column-end:c7;
}

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

Ważne

wartości właściwości grid-area możemy podawać według zasady formuły czterech wartości, dlatego tak naprawdę wymaganym składnikiem grupy wartości właściwości grid-area jest tylko jeden składnik

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

Przykładowe zapisy

a1

a1 /a2

2 /a2 /6

2 /3 /r6 /c7

row-start

Składnik row-start jest wymaganym składnikiem grupy wartości właściwości grid-area. Składnik row-start określa wartość właściwości grid-row-start, czyli to, która linia wierszowa siatki elementu HTML tworzącego układ siatki ma stanowić początkową krawędź wierszową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.

Wartość domyślna

auto

/column-start

Składnik column-start jest wymaganym składnikiem grupy wartości właściwości grid-area. Składnik column-start określa wartość właściwości grid-column-start, czyli to, która linia kolumnowa siatki elementu HTML tworzącego układ siatki ma stanowić początkową krawędź kolumnową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.

Sposób podawania

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

Wartość domyślna

auto (lub wartość składnika row-start, lecz tylko wtedy, gdy wartością składnika row-start jest wartość nazwa obszaru)

/row-end

Składnik row-end jest wymaganym składnikiem grupy wartości właściwości grid-area. Składnik row-end określa wartość właściwości grid-row-end, czyli to, która linia wierszowa siatki elementu HTML tworzącego układ siatki ma stanowić końcową krawędź wierszową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.

Sposób podawania

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

Wartość domyślna

auto (lub wartość składnika row-start, lecz tylko wtedy, gdy wartością składnika row-start jest wartość nazwa obszaru)

/column-end

Składnik column-end jest wymaganym składnikiem grupy wartości właściwości grid-area. Składnik column-end określa wartość właściwości grid-column-end, czyli to, która linia kolumnowa siatki elementu HTML tworzącego układ siatki ma stanowić końcową krawędź kolumnową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.

Sposób podawania

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

Wartość domyślna

auto (lub wartość składnika column-start, lecz tylko wtedy, gdy wartością składnika column-start jest wartość nazwa obszaru)

Przykład

  grid-area:2 /3 /6 /5;
div#item

Początkową krawędź wierszową miejsca, do którego został przypisany przykładowy element "div#item" stanowi ta linia wierszowa siatki przykładowego elementu "div#gridbox", która posiada numer "2", natomiast początkową krawędź kolumnową miejsca, do którego został przypisany przykładowy element "div#item" stanowi ta linia kolumnowa siatki przykładowego elementu "div#gridbox", która posiada numer "3", dodatkowo końcową krawędź wierszową miejsca, do którego został przypisany przykładowy element "div#item" stanowi ta linia wierszowa siatki przykładowego elementu "div#gridbox", która posiada numer "6", ponadto końcową krawędź kolumnową miejsca, do którego został przypisany przykładowy element "div#item" stanowi ta linia kolumnowa siatki przykładowego elementu "div#gridbox", która posiada numer "5", ponieważ do wspomnianego elementu "div#item" została dodana właściwość "grid-area" wraz z następującą grupą wartości: "2 /3 /6 /5".

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-rows:repeat(6, 70px);
        grid-template-columns:repeat(6, 70px);
        background-color:#CBFFFF;
      }

      #item {
        grid-area:2 /3 /6 /5;
        font-size:1.3em;
        padding:0.5em;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div id="item">div#item</div>
    </div>

  </body>
</html>