CSS гридда алоҳида элементни тегиш учун қисқартма
Алоҳида элементни горзонтал ва вертикал ўқлар бўйича
бир вақтнинг ўзида тегиш мумкин.
Бунинг учун 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;
}
:
Амалий вазифалар
Беш элементдан иборат грид яратинг ва уларни уч қаторга жойланг. Биринчи элементни горзонтал ўқ бўйича бошига ва вертикал ўқ бўйича марказига тегинг.
Олдинги вазифани ўзгартиринг, шундай килибки учинчи элементни тегиши горзонтал ўқ бўйича охирига ва вертикал ўқ бўйича марказига амалга оширилсин.
Энди грид элементларини икки қаторга жойлаб, бешинчи элементни горзонтал ўқ бўйича марказига ва вертикал ўқ бўйича охирига тегинг.
Иккинчи элемент горзонтал ўқ бўйича бошига ва вертикал ўқ бўйича охирига тегилсин, тўртинчи элемент эса горзонтал ўқ бўйича марказига ва вертикал ўқ бўйича бошига тегилсин.
