Forkortelse for justering inne i celler langs begge akser i CSS grid
Med forkortelseseiendommen place-items
kan man samtidig justere elementer
inni grid-celler langs begge akser.
Egenskapen tar to verdier,
atskilt med mellomrom.
Med den første verdien setter vi plasseringen
av elementet langs den vertikale aksen, og med den andre - langs den horisontale aksen.
Egenskapen settes i foreldreelementet.
La oss se på hvordan denne egenskapen fungerer med eksempler.
Midt på vertikalt og start horisontalt
<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;
}
:
La oss se på grid-et vårt i debuggeren:
Slutt vertikalt og midt på horisontalt
<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;
}
:
La oss se på grid-et vårt i debuggeren:
Start vertikalt og slutt horisontalt
<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;
}
:
La oss se på grid-et vårt i debuggeren:
Praktiske oppgaver
Opprett et grid som består av seks elementer og plasser dem i to kolonner. Utfør justering av elementene langs starten av den horisontale aksen og midten av den vertikale aksen til grid-et.
Plasser nå elementene i grid-et i tre kolonner og angi justering av elementene langs midten av den horisontale aksen og midten av den vertikale aksen til grid-et.
Endre den forrige oppgaven slik at justeringen av elementene skjer langs slutten av den horisontale aksen og starten av den vertikale aksen til grid-et.
