Poravnava vsebine po obeh oseh v CSS mreži
Pogosto se v mreži pojavi potreba
po sočasni poravnavi vsebine vzdolž vodoravne
in navpične osi mreže.
Za ta namen lahko skupaj uporabimo
dve lastnosti, ki ste jih spoznali v prejšnji lekciji:
justify-content in
align-content.
Na začetek navpične in konec vodoravne osi
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: flex-end;
align-content: flex-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;
}
:
Na konec navpične in začetek vodoravne osi
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: flex-start;
align-content: flex-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;
}
:
Na sredino navpične osi in vodoravne osi
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: flex-end;
align-content: 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;
}
:
Praktične naloge
Ustvarite mrežo, sestavljeno iz šestih elementov, in jih razporedite v dva stolpca. Izvedite poravnavo elementov na začetek vodoravne osi in sredino navpične osi mreže.
Zdaj razporedite elemente mreže v tri stolpce in nastavite poravnavo elementov na sredino vodoravne osi in konec navpične osi mreže.
Spremenite prejšnjo nalogo tako, da bo poravnava elementov potekala na konec vodoravne osi in sredino navpične osi mreže.