CSS тор түзүлүшүндө жеке элементти эки огу боюнча тегиздөө
Жеке элементти бир эле учурда
горизонталдык жана вертикалдык октор боюнча
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;
}
:
Практикалык тапшырмалар
Алты элементтен турган тор түзүлүшүн түзүп, аларды эки катарга жайгаштырыңыз. Экинчи элементтин тегиздөөсүн горизонталдыктын башталышы жана вертикалдыктын борбору октору боюнча ишке ашырыңыз.
Эми тор элементтерин үч катарга жайгаштырып, үчүнчү элементтин тегиздөөсүн горизонталдыктын борбору жана вертикалдыктын аягы октору боюнча белгилеңиз.
Мурдагы тапшырманы өзгөртүп, төртүнчү элементтин тегиздөөсү горизонталдыктын аягы жана вертикалдыктын борбору октору боюнча болсун.
Эми бешинчи элементтин тегиздөөсү горизонталдыктын башталышы жана вертикалдыктын башталышы октору боюнча, алтынчы элементтин тегиздөөсү болсо горизонталдыктын аягы жана вертикалдыктын борбору октору боюнча болгондой кылыңыз.
