CSS Gridda kontentni vertikal o‘q bo‘yicha joylash
Grid kontentini vertikal o‘q bo‘yicha joylash uchun biz
ota-elementda belgilanadigan
align-content xususiyatidan foydalanamiz.
O‘q boshiga qarab
Keling, grid elementlarimiz uchun vertikal o‘q boshiga joylashni belgilaymiz:
<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;
}
:
O‘q markaziga qarab
Endi esa elementlarni vertikal o‘q markaziga joylashni belgilaymiz:
<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;
}
:
O‘q oxiriga qarab
Keling, elementlarni vertikal o‘q oxiriga joylashni belgilaymiz:
<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;
}
:
Amaliy mashqlar
Ikkita qatordan iborat oltita elementli grid yarating. Elementlarni grid vertikal o‘qi boshiga joylashtiring.
Endi elementlarni ikkita qatorda joylashtiring va elementlarni grid vertikal o‘qi markaziga joylashni belgilang.
Oldingi mashqni o‘zgartiring, elementlar joylashuvi grid vertikal o‘qi oxiriga bo‘lsin.