Позиционирање на поединечен елемент по вертикалната оска на CSS Grid
На сличен начин може да се позиционираат елементи
по вертикалната оска со помош на
својството align-self.
Ајде да погледнеме на примери,
како функционира ова.
На почетокот на вертикалната оска
Ајде да го поставиме позиционирањето за првиот елемент на почетокот на вертикалната оска:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
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;
}
#elem1 {
align-self: start;
}
:
Во центарот на вертикалната оска
Ајде да го поставиме позиционирањето на првиот елемент во центарот на вертикалната оска:
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
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;
}
#elem1 {
align-self: center;
}
:
На крајот на вертикалната оска
Ајде да го поставиме позиционирањето за нашиот прв елемент во grid-от на крајот на вертикалната оска:
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
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;
}
#elem1 {
align-self: end;
}
:
Практични задачи
Создадете grid, составен од пет елементи, позиционирани во две колони. Извршете позиционирање на третиот елемент на почетокот на вертикалната оска на grid-от.
Сега позиционирајте ги елементите на grid-от во три колони и зададете позиционирање на вториот елемент во центарот на вертикалната оска на grid-от.
Променете ја претходната задача, така што позиционирањето на четвртиот и петтиот елемент да се извршува на крајот и на почетокот на вертикалната оска соодветно.
