Ostatnio edytowany:

place-content

Autor: Virtual Patriot

Opis właściwości place-content

Za pomocą właściwości place-content możemy określić kilka różnych cech dotyczących wyrównywania wierszy oraz kolumn budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Informacje dodatkowe

brak

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

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

normal

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości place-content

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

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

grupa wartości

Opis

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

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

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

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

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

Ważne

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

Przykładowe zapisy

center

normal space-between

end normal

center space-between

align

Składnik align nie jest wymaganym składnikiem grupy wartości właściwości place-content. Składnik align określa wartość właściwości align-content, czyli sposób wyrównania wierszy budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Wartość domyślna

normal

justify

Składnik justify nie jest wymaganym składnikiem grupy wartości właściwości place-content. Składnik justify określa wartość właściwości justify-content, czyli sposób wyrównania kolumn budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Wartość domyślna

wartość składnika align

Przykład

  place-content:center space-around;

Wiersze budujące siatkę przykładowego elementu "div#gridbox" zostały wyśrodkowane względem początku oraz końca osi blokowej przykładowego elementu "div#gridbox", ponadto kolumny budujące siatkę przykładowego elementu "div#gridbox" zostały rozłożone wzdłuż osi liniowej przykładowego elementu "div#gridbox", pomiędzy początkiem oraz końcem osi liniowej przykładowego elementu "div#gridbox", w stylu "space-around", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "place-content" wraz z następującą grupą wartości: "center space-around".

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, 65px);
        grid-template-columns:repeat(4, 65px);
        place-content:center space-around;
        height:450px;
        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:2;
        grid-row-end:4;
        grid-column-start:2;
        grid-column-end:4;
        background-color:orange;
      }

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

  <body>

    <div id="gridbox">
      <div></div>
      <div></div>
      <div></div>
    </div>

  </body>
</html>