Autor publikacji: Virtual Patriot - Administrator

grid-column

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

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

Przeznaczenie 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

Informacje techniczne 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.

nie

auto

brak

tak (animacja schodkowa)

Interpretacja właściwości `grid-column`

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

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

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

grupa wartości

Wyjaśnienie

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`

            start /end

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.

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

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

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