Justering langs begge akser inne i CSS grid-celler
Du kan samtidig sette
justering av elementer inne i grid-celler
både langs den horisontale og den vertikale aksen.
For dette formålet kan vi kombinere de to
egenskapene justify-items
og align-items, som
settes i foreldreelementet.
I senter av aksene
La oss justere elementene våre i senter av den horisontale og vertikale aksen:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-items: center;
align-items: center;
grid-template-columns: 100px 100px;
grid-template-rows: 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 nå se på grid-et vårt i debuggeren:
Ved start av horisontal og slutt av vertikal
La oss plassere elementene våre i celler ved starten av den horisontale aksen og slutten av den vertikale aksen:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-items: start;
align-items: end;
grid-template-columns: 100px 100px;
grid-template-rows: 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 nå se på grid-et vårt i debuggeren:
Ved slutt av horisontal og start av vertikal
La oss plassere elementene våre i celler ved slutten av den horisontale aksen og starten av den vertikale aksen:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-items: end;
align-items: start;
grid-template-columns: 100px 100px;
grid-template-rows: 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 nå se på grid-et vårt i debuggeren:
Praktiske oppgaver
Lag et grid som består av fem elementer, plassert på tre rader. Utfør justering av elementer i celler ved starten av den horisontale aksen og senter av den vertikale aksen.
Plasser nå elementene i grid-et på to rader og angi justering av elementer inni celler ved senter av den horisontale aksen og starten av den vertikale aksen.
Endre den forrige oppgaven, så justering av elementer skjer ved slutten av den horisontale aksen og senter av den vertikale aksen.
