Sisu joondamine horisontaalteljel CSS gridis
Gridis võib tekkida vajadus mitte ainult
paigutada, vaid ka joondada sisu piki horisontaaltelge.
Sellisel juhul kasutame
omadust justify-content, mis
antakse ülemiselemendile.
Vaatame näidetega, kuidas
see omadus töötab.
Telje alguses
Määrame meie elementide joonduse horisontaaltelje algusesse:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-content: start;
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;
}
:
Telje keskel
Nüüd määrame meie elementide joonduse horisontaaltelje keskele:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-content: center;
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;
}
:
Telje lõpus
Määrame nüüd meie elementide joonduse horisontaaltelje lõppu:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-content: end;
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;
}
:
Praktilised ülesanded
Loo grid, mis koosneb kuuest elemendist, paigutatud kahte veergu. Teosta elementide joondus horisontaaltelje algusesse.
Nüüd paiguta gridi elemendid kolme veeru peale ja määra elementide joondus horisontaaltelje keskele.
Muuda eelmist ülesannet nii, et elementide joondus toimuks horisontaaltelje lõppu.