Autor publikacji
Virtual Patriot - Administrator

justify-items

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości justify-items

Za pomocą właściwości justify-items możemy określić sposób wyrównania elementów HTML należących do siatki interesującego nas elementu HTML tworzącego układ siatki. Wspomniane wyrównywanie elementów HTML należących do siatki elementu HTML tworzącego układ siatki dokonuje się względem początkowej oraz końcowej krawędzi kolumnowej miejsca, do którego został przypisany dany element HTML.

Informacje dodatkowe

gdy któryś z elementów HTML należących do siatki elementu HTML tworzącego układ siatki w jakikolwiek sposób został wyrównany za pomocą wartości auto właściwości margin względem początkowej oraz końcowej krawędzi kolumnowej miejsca, do którego został przypisany, wtedy właściwość justify-items nie daje żadnego widocznego efektu dla danego elementu HTML

Informacje techniczne o właściwości justify-items

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

normal

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości justify-items

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Opis wartości właściwości justify-items

normal

Wyjaśnienie

Wartość normal jest domyślną wartością właściwości justify-items.

Wartość normal właściwości justify-items elementu HTML typu grid lub inline-grid działa na takiej samej zasadzie jak wartość stretch (lub na takiej samej zasadzie jak wartość start, dla tych elementów HTML należących do siatki elementu HTML tworzącego układ siatki, które dodatkowo reprezentują treść zewnętrzną (plik graficzny, plik audio, plik video itp.)).

Przykład

  justify-items:normal;
div-1
div-2
div-3
div-4

Ze względu na to, iż przykładowy element "div#gridbox" jest typu "grid" wartość domyślna właściwości "justify-items" przykładowego elementu "div#gridbox" działa na takiej samej zasadzie jak wartość "stretch", a co za tym idzie rozmiar szerokości obszaru zawartości elementów dzieci przykładowego elementu "div#gridbox" został rozciągnięty względem początkowej oraz końcowej krawędzi kolumnowej miejsca, do którego został przypisany każdy z poszczególnych elementów dzieci.

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(4, 100px);
        grid-template-columns:repeat(4, 100px);
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>

start

Wyjaśnienie

Za pomocą wartości start właściwości justify-items możemy sprawić, że należące do siatki interesującego nas elementu HTML tworzącego układ siatki elementy HTML zostaną wyrównane w kierunku początkowej krawędzi kolumnowej miejsca, do którego został przypisany każdy z poszczególnych elementów HTML.

Przykład

  justify-items:start;
div-1
div-2
div-3
div-4

Elementy dzieci przykładowego elementu "div#gridbox" zostały wyrównane w kierunku początkowej krawędzi kolumnowej miejsca, do którego został przypisany każdy z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "justify-items" wraz z wartością "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(4, 100px);
        grid-template-columns:repeat(4, 100px);
        justify-items:start;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>

end

Wyjaśnienie

Za pomocą wartości end właściwości justify-items możemy sprawić, że należące do siatki interesującego nas elementu HTML tworzącego układ siatki elementy HTML zostaną wyrównane w kierunku końcowej krawędzi kolumnowej miejsca, do którego został przypisany każdy z poszczególnych elementów HTML.

Przykład

  justify-items:end;
div-1
div-2
div-3
div-4

Elementy dzieci przykładowego elementu "div#gridbox" zostały wyrównane w kierunku końcowej krawędzi kolumnowej miejsca, do którego został przypisany każdy z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "justify-items" wraz z wartością "end".

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(4, 100px);
        grid-template-columns:repeat(4, 100px);
        justify-items:end;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>

center

Wyjaśnienie

Za pomocą wartości center właściwości justify-items możemy sprawić, że należące do siatki interesującego nas elementu HTML tworzącego układ siatki elementy HTML zostaną wyśrodkowane względem początkowej oraz końcowej krawędzi kolumnowej miejsca, do którego został przypisany każdy z poszczególnych elementów HTML.

Przykład

  justify-items:center;
div-1
div-2
div-3
div-4

Elementy dzieci przykładowego elementu "div#gridbox" zostały wyśrodkowane względem początkowej oraz końcowej krawędzi kolumnowej miejsca, do którego został przypisany każdy z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "justify-items" wraz z wartością "center".

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(4, 100px);
        grid-template-columns:repeat(4, 100px);
        justify-items:center;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>

left

Wyjaśnienie

Za pomocą wartości left właściwości justify-items możemy sprawić, że należące do siatki interesującego nas elementu HTML tworzącego układ siatki elementy HTML zostaną wyrównane w kierunku tej krawędzi kolumnowej miejsca, do którego został przypisany każdy z poszczególnych elementów HTML, która to krawędź kolumnowa znajduje się na lewo wzdłuż osi liniowej elementu HTML tworzącego dany układ siatki.

Przykład

  justify-items:left;
div-1
div-2
div-3
div-4

Elementy dzieci przykładowego elementu "div#gridbox" zostały wyrównane w kierunku tej krawędzi kolumnowej miejsca, do którego został przypisany każdy z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", która to krawędź kolumnowa znajduje się na lewo wzdłuż osi liniowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "justify-items" wraz z wartością "left".

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(4, 100px);
        grid-template-columns:repeat(4, 100px);
        justify-items:left;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>

self-start

Wyjaśnienie

Za pomocą wartości self-start właściwości justify-items możemy sprawić, że należące do siatki interesującego nas elementu HTML tworzącego układ siatki elementy HTML zostaną wyrównane w kierunku tej krawędzi kolumnowej miejsca, do którego został przypisany każdy z poszczególnych elementów HTML, która to krawędź kolumnowa znajduje się bliżej początku tej osi poszczególnego elementu HTML, która to oś znajduje się na osi liniowej elementu HTML tworzącego dany układ siatki.

Przykład

  justify-items:self-start;
div-1
div-2
div-3
div-4

Elementy dzieci przykładowego elementu "div#gridbox" zostały wyrównane w kierunku tej krawędzi kolumnowej miejsca, do którego został przypisany każdy z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", która to krawędź kolumnowa znajduje się bliżej początku tej osi każdego z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", która to oś znajduje się na osi liniowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "justify-items" wraz z wartością "self-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(4, 100px);
        grid-template-columns:repeat(4, 100px);
        justify-items:self-start;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        direction:rtl;
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        writing-mode:vertical-lr;
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        writing-mode:vertical-rl;
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>

self-end

Wyjaśnienie

Za pomocą wartości self-end właściwości justify-items możemy sprawić, że należące do siatki interesującego nas elementu HTML tworzącego układ siatki elementy HTML zostaną wyrównane w kierunku tej krawędzi kolumnowej miejsca, do którego został przypisany każdy z poszczególnych elementów HTML, która to krawędź kolumnowa znajduje się bliżej końca tej osi poszczególnego elementu HTML, która to oś znajduje się na osi liniowej elementu HTML tworzącego dany układ siatki.

Przykład

  justify-items:self-end;
div-1
div-2
div-3
div-4

Elementy dzieci przykładowego elementu "div#gridbox" zostały wyrównane w kierunku tej krawędzi kolumnowej miejsca, do którego został przypisany każdy z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", która to krawędź kolumnowa znajduje się bliżej końca tej osi każdego z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", która to oś znajduje się na osi liniowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "justify-items" wraz z wartością "self-end".

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(4, 100px);
        grid-template-columns:repeat(4, 100px);
        justify-items:self-end;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        direction:rtl;
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        writing-mode:vertical-lr;
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        writing-mode:vertical-rl;
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>

stretch

Wyjaśnienie

Za pomocą wartości stretch właściwości justify-items możemy sprawić, że należące do siatki interesującego nas elementu HTML tworzącego układ siatki elementy HTML zostaną wyrównane w stylu stretch. Styl stretch oznacza, że jeżeli pomiędzy początkową oraz końcową krawędzią kolumnową miejsca, do którego został przypisany dany element HTML, pozostała wolna przestrzeń, wtedy na podstawie rozmiaru tej wolnej przestrzeni zostanie dokonane rozciągnięcie, znajdującego się pomiędzy wspomnianą początkową oraz końcową krawędzią kolumnową miejsca, rozmiaru obszaru zawartości danego elementu HTML.

Rozmiar szerokości obszaru zawartości elementu HTML może zostać rozciągnięty tylko w przypadku, gdy wartością właściwości width elementu HTML jest wartość auto, natomiast rozmiar wysokości obszaru zawartości elementu HTML może zostać rozciągnięty tylko w przypadku, gdy wartością właściwości height elementu HTML jest wartość auto. Gdy docelowy rozmiar obszaru zawartości danego elementu HTML należącego do siatki elementu HTML tworzącego układ siatki nie może zostać rozciągnięty, wtedy wartość "stretch" dla danego elementu HTML działa na takiej samej zasadzie jak wartość start.

Przykład

  justify-items:stretch;
div-1
div-2
div-3
div-4

Rozmiar szerokości obszaru zawartości elementów dzieci przykładowego elementu "div#gridbox" został rozciągnięty względem początkowej oraz końcowej krawędzi kolumnowej miejsca, do którego został przypisany każdy z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "justify-items" wraz z wartością "stretch".

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(4, 100px);
        grid-template-columns:repeat(4, 100px);
        justify-items:stretch;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>