Forkortelse for justering av et enkelt element i CSS-grid
Du kan samtidig justere et enkelt element
både horisontalt og vertikalt.
Dette gjøres med egenskapen place-self.
Den tar to verdier atskilt med mellomrom.
Den første verdien angir justering
vertikalt, og den andre - horisontalt.
La oss se på noen eksempler.
Sentrert vertikalt og start horisontalt
<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;
}
:
Start vertikalt og slutt horisontalt
<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;
}
:
Slutt vertikalt og sentrert horisontalt
<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;
}
:
Praktiske oppgaver
Opprett et grid som består av fem elementer og plasser dem på tre rader. Gjør justering av det første elementet til start horisontalt og senter vertikalt.
Endre den forrige oppgaven slik at justering av det tredje elementet skjer mot slutten horisontalt og senter vertikalt.
Plasser nå gridelementene på to rader og angi justering av det femte elementet til senter horisontalt og slutt vertikalt.
Gjør slik at det andre elementet er justert til start horisontalt og slutt vertikalt, og det fjerde elementet - til senter horisontalt og start vertikalt.
