Autor publikacji: Virtual Patriot - Administrator

grid-column-start

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

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

Przeznaczenie właściwości `grid-column-start`

Za pomocą właściwości grid-column-start możemy określić, 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.

Informacje dodatkowe

gdy wartość właściwości grid-column-start oraz wartość właściwości grid-column-end wskazuje na tę samą linię kolumnową siatki, wtedy wartością właściwości grid-column-end staje się wartość auto

gdy wartość właściwości grid-column-start wskazuje na linię kolumnową siatki występującą w kolejności rosnącej po linii kolumnowej siatki, na którą wskazuje wartość właściwości grid-column-end, wtedy obie wartości obu właściwości zostają ze sobą zamienione

Informacje techniczne o właściwości `grid-column-start`

przeznaczenie

element dziecko elementu HTML typu grid
element dziecko elementu HTML typu inline-grid

pozycja

static, relative

Właściwość "grid-column-start" 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-start" jest również element potomek elementu HTML typu grid lub inline-grid.

nie

brak

tak (animacja schodkowa)

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

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

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

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

auto

Wyjaśnienie

Wartość auto jest domyślną wartością właściwości grid-column-start.

Domyślnie przeglądarka internetowa sama określa, 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ść właściwości grid-auto-flow elementu HTML tworzącego układ siatki oraz wartość właściwości grid-column-end elementu HTML przypisywanego do miejsca na siatce mają wpływ na to, która linia kolumnowa siatki elementu HTML tworzącego układ siatki zostanie wybrana przez przeglądarkę internetową.

Informacje dodatkowe: gdy element HTML posiada określoną przez nas końcową krawędź kolumnową miejsca, do którego powinien zostać przypisany, lecz wartością właściwości grid-column-start tego elementu HTML jest wartość auto, wtedy początkową krawędzią kolumnową wspomnianego miejsca staje się poprzednia w kolejności linia kolumnowa siatki, nawet jeżeli będzie oznaczało to odwołanie się do linii kolumnowej siatki teoretycznie znajdującej się na ujemnej pozycji (gdy element HTML posiada pozycję absolute, wtedy początkową krawędzią kolumnową wspomnianego miejsca staje się początkowa krawędź liniowa elementu HTML tworzącego układ siatki)

Przykład

  grid-column-start:auto;

div#item

Przeglądarka internetowa sama określiła, która linia kolumnowa siatki przykładowego elementu "div#gridbox" ma stanowić początkową krawędź kolumnową miejsca, do którego został przypisany przykładowy element "div#item".

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

numer linii

Wyjaśnienie

Za pomocą właściwości grid-column-start oraz dowolnej różnej od zera liczby całkowitej możemy określić, która (posiadająca swój numer) 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ści ujemne: wartości ujemne odwołują się do kolejnych ostatnich linii kolumnowych siatki (wartość -1 wskazuje na ostatnią linię kolumnową siatki, wartość -2 wskazuje na przedostatnią linię kolumnową siatki itd.)

Przykład

  grid-column-start:2;

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 "2", ponieważ do wspomnianego elementu "div#item" została dodana właściwość "grid-column-start" wraz z wartością "2".

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

nazwa linii

Wyjaśnienie

Za pomocą właściwości grid-column-start oraz wybranej nazwy możemy określić, która (posiadająca swoją nazwę) 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.

Informacje dodatkowe: gdy podana przez nas wartość właściwości grid-column-start odwołuje się do nieistniejącej nazwy linii kolumnowej siatki, wtedy każda następna w kolejności linia kolumnowa siatki traktowana jest przez przeglądarkę internetową jako linia posiadająca tę nazwę (linie kolumnowe siatki występujące pomiędzy określonym przez nas rozmiarem szerokości kolumny budującej siatkę oraz linie kolumnowe siatki znajdujące się w obrębie jakiegokolwiek określonego przez nas obszaru występującego na siatce, nie są brane pod uwagę)

Przykład

  grid-column-start:c3;

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 nazwę "c3", ponieważ do wspomnianego elementu "div#item" została dodana właściwość "grid-column-start" wraz z wartością "c3".

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:[r1] 70px [r2] 70px [r3] 70px [r4] 70px [r5] 70px [r6] 70px [r7];
        grid-template-columns:[c1] 70px [c2] 70px [c3] 70px [c4] 70px [c5] 70px [c6] 70px [c7];
        background-color:#7DCDE8;
      }

      #item {
        grid-row-start:r2;
        grid-row-end:r6;
        grid-column-start:c3;
        grid-column-end:c5;
        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>

nazwa krawędzi

Wyjaśnienie

Za pomocą właściwości grid-column-start oraz wybranej nazwy krawędzi kolumnowej istniejącego na siatce obszaru możemy określić, 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ść "nazwa krawędzi" ma pierwszeństwo przed wartością nazwa linii.

Przykład

  grid-column-start:bb-start;

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", na której znajduje się początkowa krawędź kolumnowa "bb-start" obszaru "bb", ponieważ do wspomnianego elementu "div#item" została dodana właściwość "grid-column-start" wraz z wartością "bb-start".

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);
        grid-template-areas:'.. .. .. bb bb bb'
                            '.. .. .. bb bb bb'
                            '.. .. .. bb bb bb'
                            'aa aa aa .. .. ..'
                            'aa aa aa .. .. ..'
                            'aa aa aa .. .. ..';
        background-color:#7DCDE8;
      }

      #item {
        grid-row-start:bb-start;
        grid-row-end:bb-end;
        grid-column-start:bb-start;
        grid-column-end:bb-end;
        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>

nazwa obszaru

Wyjaśnienie

Za pomocą właściwości grid-column-start oraz wybranej nazwy istniejącego na siatce obszaru możemy określić, która linia kolumnowa siatki elementu HTML tworzącego układ siatki, na której znajduje się początkowa krawędź kolumnowa wspomnianego obszaru ma stanowić początkową krawędź kolumnową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.

Wartość "nazwa obszaru" ma pierwszeństwo przed wartością nazwa krawędzi oraz wartością nazwa linii.

Przykład

  grid-column-start:bb;

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", na której znajduje się początkowa krawędź kolumnowa obszaru "bb", ponieważ do wspomnianego elementu "div#item" została dodana właściwość "grid-column-start" wraz z wartością "bb".

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);
        grid-template-areas:'.. .. .. bb bb bb'
                            '.. .. .. bb bb bb'
                            '.. .. .. bb bb bb'
                            'aa aa aa .. .. ..'
                            'aa aa aa .. .. ..'
                            'aa aa aa .. .. ..';
        background-color:#7DCDE8;
      }

      #item {
        grid-row-start:bb;
        grid-row-end:bb;
        grid-column-start:bb;
        grid-column-end:bb;
        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>

pierwszy wzorzec wartości

Wyjaśnienie

Za pomocą właściwości grid-column-start oraz jednego z góry zdefiniowanych wzorców wartości możemy określić, 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.

Składniki pierwszego wzorca wartości właściwości `grid-column-start`

            order name

Przykładowe zapisy

2 r2

3 r1

-1 r2

order

Składnik order jest wymaganym składnikiem wzorca wartości właściwości grid-column-start. Składnik order określa, która w kolejności wskazana przez parametr name linia kolumnowa siatki elementu HTML tworzącego układ siatki powinna zostać odszukana.

Dostępne wartości: dowolna różna od zera liczba całkowita
Wartości ujemne: wartości ujemne odwołują się do ostatniej w kolejności wskazanej przez parametr name linii kolumnowej siatki (wartość -1 odszuka ostatnią w kolejności wskazaną przez parametr name linię kolumnową siatki, wartość -2 odszuka przedostatnią w kolejności wskazaną przez parametr name linię kolumnową siatki itd.)
Wartość domyślna: brak

name

Składnik name jest wymaganym składnikiem wzorca wartości właściwości grid-column-start. Składnik name określa nazwę szukanej linii kolumnowej siatki elementu HTML tworzącego układ siatki.

Przykład

  grid-column-start:2 c1;

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 jest drugą w kolejności linią kolumnową o nazwie "c1", ponieważ do wspomnianego elementu "div#item" została dodana właściwość "grid-column-start" wraz z następującymi wartościami: "2 c1".

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:[r1] 70px [r2] 70px [r1] 70px [r2] 70px [r1] 70px [r2] 70px [r1];
        grid-template-columns:[c1] 70px [c2] 70px [c1] 70px [c2] 70px [c1] 70px [c2] 70px [c1];
        background-color:#7DCDE8;
      }

      #item {
        grid-row-start:2 r1;
        grid-row-end:3 r2;
        grid-column-start:2 c1;
        grid-column-end:3 c2;
        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>

drugi wzorzec wartości

Wyjaśnienie

Składniki drugiego wzorca wartości właściwości `grid-column-start`

            span number name

Przykładowe zapisy

span 2

span r3

span 3 r1

span

Składnik span jest wymaganym składnikiem wzorca wartości właściwości grid-column-start. Składnik span informuje przeglądarkę internetową, że chcemy skorzystać z danego wzorca wartości właściwości grid-column-start.

number

Składnik number nie jest zawsze wymaganym składnikiem wzorca wartości właściwości grid-column-start. Składnik number określa, która w kolejności linia kolumnowa siatki elementu HTML tworzącego układ siatki powinna zostać odszukana.

Dostępne wartości

dowolna dodatnia liczba całkowita

Sposób podawania

gdy w naszym zapisie nie podaliśmy wartości składnika name, wtedy w naszym zapisie zawsze musimy podać wartość składnika number

Informacje dodatkowe

odszukiwanie docelowej linii kolumnowej siatki elementu HTML tworzącego układ siatki rozpoczyna się od linii kolumnowej, na którą wskazuje wartość właściwości grid-column-end elementu HTML, do którego chcemy dodać właściwość grid-column-start

odszukiwanie docelowej linii kolumnowej siatki elementu HTML tworzącego układ siatki odbywa się w kierunku początkowej krawędzi liniowej tego elementu HTML

Wartość domyślna

1

name

Składnik name nie jest zawsze wymaganym składnikiem wzorca wartości właściwości grid-column-start. Składnik name określa nazwę szukanej linii kolumnowej siatki elementu HTML tworzącego układ siatki.

Dostępne wartości: wyłącznie nazwa linii
Sposób podawania: gdy w naszym zapisie nie podaliśmy wartości składnika number, wtedy w naszym zapisie zawsze musimy podać wartość składnika name
Wartość domyślna: brak

Przykład

  grid-column-start:span 3;

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 jest trzecią kolejną linią kolumnową licząc od piątej linii kolumnowej oraz w kierunku początkowej krawędzi liniowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#item" została dodana właściwość "grid-column-end" wraz z wartością "5" oraz właściwość "grid-column-start" wraz z następującymi wartościami: "span 3".

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-start:span 4;
        grid-row-end:6;
        grid-column-start:span 3;
        grid-column-end: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>