Justering av individuelt element langs begge akser i CSS grid
Du kan justere et individuelt element
både horisontalt og vertikalt
samtidig ved å kombinere egenskapene justify-self
og align-self.
Ved start av horisontal og senter av vertikal
La oss sette justeringen for vårt første element til start av den horisontale aksen og senter av den vertikale aksen:
<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 {
justify-self: start;
align-self: center;
}
:
Ved senter av horisontal og start av vertikal
La oss nå sette justeringen for det første elementet til senter av den horisontale aksen og start av den vertikale aksen:
<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 {
justify-self: center;
align-self: start;
}
:
Ved slutt av horisontal og senter av vertikal
La oss sette justeringen av det første elementet til slutt av den horisontale aksen og senter av den vertikale aksen:
<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 {
justify-self: end;
align-self: center;
}
:
Praktiske oppgaver
Opprett et grid som består av seks elementer og plasser dem i to rader. Utfør justering av det andre elementet ved start av den horisontale aksen og senter av den vertikale aksen.
Plasser nå elementene i griddet i tre rader og angi justering av det tredje elementet ved senter av den horisontale aksen og slutt av den vertikale aksen.
Endre den forrige oppgaven, så justeringen av det fjerde elementet skjer ved slutt av den horisontale aksen og senter av den vertikale aksen.
Gjør nå slik at justeringen av det femte elementet skjer ved start av den horisontale aksen og start av den vertikale aksen, og det sjette elementet - ved slutt av den horisontale aksen og senter av den vertikale aksen.
