Ostatnio edytowany:

grid-column-start

Autor: Virtual Patriot

Opis 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

Dodatkowe techniczne informacje 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.

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

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

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

auto

Opis

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

      #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

Opis

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

      #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

Opis

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

      #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

Opis

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

      #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

Opis

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

      #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

Opis

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

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.

Dostępne wartości

wyłącznie nazwa linii

Wartość domyślna

brak

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

      #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

Opis

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 drugiego wzorca wartości właściwości grid-column-start

Ważne

gdy zdecydowaliśmy się skorzystać z danego wzorca wartości, wtedy dla właściwości grid-column-end nie możemy skorzystać z danego wzorca wartości

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.

Dostępne wartości

słowo kluczowe span

Wartość domyślna

brak

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

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