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;
}
- 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.
- 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.
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".
<!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:#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: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>
