Afkorting vir uitlyning van 'n enkele element in CSS-grid
Jy kan 'n enkele element gelyktydig uitlyn
op beide die horisontale en vertikale asse.
Vir hierdie doel word die place-self eienskap gebruik.
Dit neem twee waardes aan, geskei deur 'n spasie.
Die eerste waarde spesifiseer die uitlyning
op die vertikale as, en die tweede - op die horisontale as.
Kom ons kyk na voorbeelde.
Vertikaal gesentreer en horisontaal aan die begin
<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;
}
:
Vertikaal aan die begin en horisontaal aan die einde
<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;
}
:
Vertikaal aan die einde en horisontaal gesentreer
<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;
}
:
Praktiese take
Skep 'n grid wat uit vyf elemente bestaan en plaas hulle in drie rye. Voer uitlyning van die eerste element uit op die horisontale as aan die begin en vertikaal gesentreer.
Verander die vorige taak sodat die uitlyning van die derde element op die horisontale as aan die einde en vertikaal gesentreer plaasvind.
Plaas nou die grid-elemente in twee rye en stel die uitlyning van die vyfde element in om horisontaal gesentreer en vertikaal aan die einde te wees.
Maak dit so dat die tweede element uitgelyn word op die horisontale as aan die begin en vertikaal aan die einde, en die vierde element - horisontaal gesentreer en vertikaal aan die begin.
