Позиционирање на посебен елемент по двете оски на CSS Grid
Може да се позиционира посебен елемент
истовремено и по хоризонталната,
и по вертикалната оска
со комбинирање на својствата justify-self
и align-self.
По почеток на хоризонталната и центар на вертикалната
Ајде да поставиме позиционирање за нашиот прв елемент по почеток на хоризонталната и вертикалната оска:
<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 {
justify-self: start;
align-self: center;
}
:
По центар на хоризонталната и почеток на вертикалната
Сега ајде да поставиме позиционирање на првиот елемент по центар на хоризонталната и почеток на вертикалната оска:
<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 {
justify-self: center;
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 {
justify-self: end;
align-self: center;
}
:
Практични задачи
Создадете grid, составен од шест елементи и поставете ги во два реда. Извршете позиционирање на вториот елемент по почеток на хоризонталната и центар на вертикалната оска.
Сега поставете ги елементите на grid во три реда и зададете позиционирање на третиот елемент по центар на хоризонталната и крај на вертикалната оска.
Променете ја претходната задача, така што позиционирањето на четвртиот елемент да се случува по крај на хоризонталната и центар на вертикалната оска.
Сега направете така што позиционирањето на петтиот елемент да се случува по почеток на хоризонталната и почеток на вертикалната оска, а шестиот елемент - по крај на хоризонталната и центар на вертикалната оска.
