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