Ostatnio edytowany:

grid-column

Autor: Virtual Patriot

Opis właściwości grid-column

Za pomocą właściwości grid-column możemy określić, które linie kolumnowe siatki elementu HTML tworzącego układ siatki mają stanowić początkową oraz końcową krawędź 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-column

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

static, relative

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

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

grupa wartości

Opis

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

/* REGUŁA - 2 */
div {
  grid-column-start:2;
  grid-column-end:c6;
}

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

Ważne

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

Przykładowe zapisy

a1

2 /6

c2 /4 r1

2 c2 /span 2

span 3 c1 /c7

start

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

Wartość domyślna

auto

/end

Składnik end nie jest wymaganym składnikiem grupy wartości właściwości grid-column. Składnik 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 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-column:3 /5;
div#item

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", natomiast 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-column" wraz z następującą grupą wartości: "3 /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-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>