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 элементтерин эки катарга жайгаштырып, бешинчи элементтин тегиздөөсүн горизонталь огунун борбору жана тик огунун аягы боюнча белгилеңиз.
Экинчи элемент горизонталь огунун башталышы жана тик огунун аягы боюнча, төртүнчү элемент горизонталь огунун борбору жана тик огунун башталышы боюнча тегизделсин деп кылыңыз.
