CSS gridindäki aýratyn elementi tesirleme üçin gysga kod
Aýratyn elementi gorizontal we vertikal oklaryň ikisinde-de bir wagtda tesirlemek bolýar.
Bunun üçin place-self hossasy ulanylýar.
Ol boşluk arkaly aýrylan iki bahany kabul edýär.
Birnji baha vertikal tesirleme, ikinjisi bolsa gorizontal tesirleme üçin görkezilýär.
Mysallara seredeliň.
Vertikal merkezde we gorizontal başynda
<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;
}
:
Vertikal başynda we gorizontal soňunda
<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;
}
:
Vertikal soňunda we gorizontal merkezde
<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;
}
:
Amaly meseleler
Bäş elementden ybarat grid dörediň we olary üç hatarda ýerleşdiriň. Birnji elementleri gorizontal baş we vertikal merkez oklary boýunça tesirläň.
Öňki meseläni üçünji elementi gorizontal soň we vertikal merkez oklary boýunça tesirleneýändigi üçtä üýtgediň.
Indi grid elementlerini iki hatarda ýerleşdiriň we bäşinji elementleri gorizontal merkez we vertikal soň oklary boýunça tesirlemäni belleň.
Ikinji elementi gorizontal baş we vertikal soň oklary boýunça, dördünji elementi bolsa gorizontal merkez we vertikal baş oklary boýunça tesirleneýändigi üçtä ediň.
