Sisu joondamine vertikaalteljel CSS gridis
Sisu joondamiseks piki vertikaaltelge
gridis kasutame
omadust align-content, mis
seadakse vanemelemendis.
Telje alguse suunas
Seadistame oma elementide joonduse gridis vertikaaltelje alguse suunas:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-content: 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;
}
:
Telje keskele
Nüüd seadistame elementide joonduse vertikaaltelje keskele:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
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;
}
:
Telje lõppu
Seadistame elementide joonduse vertikaaltelje lõppu:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-content: 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;
}
:
Praktilised ülesanded
Loo grid, mis koosneb kuuest elemendist, paigutatud kahte ritta. Teosta elementide joondamine gridi vertikaaltelje alguse suunas.
Nüüd paiguta gridi elemendid kahte ritta ja määra elementide joondamine gridi vertikaaltelje keskele.
Muuda eelmist ülesannet nii, et elementide joondamine toimuks vertikaaltelje lõppu.