Za pomocą właściwości place-self oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech dotyczących wyrównywania interesującego nas elementu HTML należącego do siatki elementu HTML tworzącego układ siatki.
/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */
/* REGUŁA - 1 */
div {
place-self:center end;
}
/* REGUŁA - 2 */
div {
align-self:center;
justify-self:end;
}
- align
-
Składnik align nie jest wymaganym składnikiem grupy wartości właściwości place-self. Składnik align określa wartość właściwości align-self, czyli sposób wyrównania interesującego nas elementu HTML należącego do siatki elementu HTML tworzącego układ siatki względem początkowej oraz końcowej krawędzi wierszowej miejsca, do którego został przypisany.
- justify
-
Składnik justify nie jest wymaganym składnikiem grupy wartości właściwości place-self. Składnik justify określa wartość właściwości justify-self, czyli sposób wyrównania interesującego nas elementu HTML należącego do siatki elementu HTML tworzącego układ siatki względem początkowej oraz końcowej krawędzi kolumnowej miejsca, do którego został przypisany.
place-self:center end;
Drugi element dziecko przykładowego elementu "div#gridbox" został wyśrodkowany względem początkowej oraz końcowej krawędzi wierszowej miejsca, do którego został przypisany, ponadto drugi element dziecko przykładowego elementu "div#gridbox" został wyrównany w kierunku końcowej krawędzi kolumnowej miejsca, do którego został przypisany, ponieważ do wspomnianego drugiego elementu dziecka przykładowego elementu "div#gridbox" została dodana właściwość "place-self" wraz z następującą grupą wartości: "center end".
<!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) {
place-self:center end;
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>
