Shkurtesa për rreshtimin e një elementi të vetëm në CSS Grid
Mund të rreshtoni njëkohësisht një element të vetëm
sipas boshteve horizontale dhe vertikale.
Për këtë përdoret vetia place-self.
Ajo merr dy vlera të ndara me hapësirë.
Vlera e parë specifikon rreshtimin
sipas boshtit vertikal, dhe e dyta - sipas atij horizontal.
Le t'i shohim me shembuj.
Në qendër vertikale dhe fillim horizontal
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: center start;
}
:
Në fillim vertikal dhe fund horizontal
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: start end;
}
:
Në fund vertikal dhe në qendër horizontal
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: end center;
}
:
Detyra praktike
Krijoni një grid, i përbërë nga pesë elemente dhe vendosini ato në tre rreshta. Kryeni rreshtimin e elementit të parë sipas fillimit të boshtit horizontal dhe qendrës së boshtit vertikal.
Ndryshoni detyrën e mëparshme në mënyrë që rreshtimi i elementit të tretë të kryhet sipas fundit të boshtit horizontal dhe qendrës së boshtit vertikal.
Tani vendosni elementet e grid në dy rreshta dhe caktoni rreshtimin e elementit të pestë sipas qendrës së boshtit horizontal dhe fundit të boshtit vertikal.
Bëni që elementi i dytë të rreshtohet sipas fillimit të boshtit horizontal dhe fundit të boshtit vertikal, ndërsa elementi i katërt - sipas qendrës së boshtit horizontal dhe fillimit të boshtit vertikal.
