Shkurtesa për rreshtimin brenda qelizave përgjatë të dy akseve në CSS Grid
Me ndihmën e shkurtesës së vetive place-items
mund të rreshtohen elementet
brenda qelizave të gridit njëkohësisht përgjatë të dy akseve.
Vetia merr dy vlera,
të ndara me hapësirë.
Me vlerën e parë caktojmë vendosjen
e elementit përgjatë aksit vertikal, dhe me të dytën - përgjatë aksit horizontal.
Vetia caktohet në elementin prind.
Le të shohim funksionimin e kësaj vetie me shembuj.
Në qendër vertikale dhe në fillim horizontale
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
place-items: center start;
grid-template-columns: 100px 100px;
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;
}
:
Le të shohim gridin tonë në debuger:
Në fund vertikale dhe në qendër horizontale
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
place-items: end center;
grid-template-columns: 100px 100px;
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;
}
:
Le të shohim gridin tonë në debuger:
Në fillim vertikale dhe në fund horizontale
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
place-items: start end;
grid-template-columns: 100px 100px;
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;
}
:
Le të shohim gridin tonë në debuger:
Detyra praktike
Krijoni një grid, i përbërë nga gjashtë elemente dhe vendosini ato në dy kolonë. Kryeni rreshtimin e elementeve në fillim të aksit horizontal dhe në qendër të aksit vertikal të gridit.
Tani vendosni elementet e gridit në tre kolona dhe caktoni rreshtimin e elementeve në qendër të aksit horizontal dhe në qendër të aksit vertikal të gridit.
Ndryshoni detyrën e mëparshme ashtu që rreshtimi i elementeve të kryhet në fund të aksit horizontal dhe në fillim të aksit vertikal të gridit.
