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;
}
- 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.
- 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.
place-items:center end;
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".
<!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:#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>
