Ostatnio edytowany:

place-items

Autor: Virtual Patriot

Opis właściwości place-items

Za pomocą właściwości place-items możemy określić kilka różnych cech dotyczących wyrównywania elementów HTML należących do siatki interesującego nas elementu HTML tworzącego układ siatki.

Informacje dodatkowe

brak

Dodatkowe techniczne informacje o właściwości place-items

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

normal

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości place-items

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

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

grupa wartości

Opis

Za pomocą właściwości place-items oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech dotyczących wyrównywania elementów HTML należących do siatki interesującego nas elementu HTML tworzącego układ siatki.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  place-items:center end;
}

/* REGUŁA - 2 */
div {
  align-items:center;
  justify-items:end;
}

Składniki grupy wartości właściwości place-items

Ważne

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

Przykładowe zapisy

center

normal end

start normal

center self-end

align

Składnik align nie jest wymaganym składnikiem grupy wartości właściwości place-items. Składnik align określa wartość właściwości align-items, czyli sposób wyrównania elementów HTML należących do siatki interesującego nas elementu HTML tworzącego układ siatki względem początkowej oraz końcowej krawędzi wierszowej miejsca, do którego został przypisany poszczególny element HTML.

Wartość domyślna

normal

justify

Składnik justify nie jest wymaganym składnikiem grupy wartości właściwości place-items. Składnik justify określa wartość właściwości justify-items, czyli sposób wyrównania elementów HTML należących do siatki interesującego nas elementu HTML tworzącego układ siatki względem początkowej oraz końcowej krawędzi kolumnowej miejsca, do którego został przypisany poszczególny element HTML.

Wartość domyślna

wartość składnika align

Przykład

  place-items:center end;
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 wierszowej miejsca, do którego został przypisany każdy z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", ponadto 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ść "place-items" wraz z następującą grupą wartości: "center 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);
        place-items:center end;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

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