Ostatnio edytowany:

grid-row

Autor: Virtual Patriot

Opis właściwości grid-row

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

Informacje dodatkowe

brak

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

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

static, relative

Właściwość "grid-row" 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-row" 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-row

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

grupa wartości

Opis

Za pomocą właściwości grid-row oraz z góry zdefiniowanej grupy wartości możemy określić, które linie wierszowe siatki elementu HTML tworzącego układ siatki mają stanowić początkową oraz końcową krawędź wierszową 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-row:2 /r6;
}

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

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

Ważne

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

Przykładowe zapisy

a1

2 /6

r2 /4 r1

2 r2 /span 2

span 3 r1 /r7

start

Składnik start jest wymaganym składnikiem grupy wartości właściwości grid-row. Składnik 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

/end

Składnik end nie jest wymaganym składnikiem grupy wartości właściwości grid-row. Składnik 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 end należy umieścić znak /

Wartość domyślna

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

Przykład

  grid-row:2 /6;
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 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", ponieważ do wspomnianego elementu "div#item" została dodana właściwość "grid-row" wraz z następującą grupą wartości: "2 /6".

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-row:2 /6;
        grid-column:3 /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>