CSS grid-de ýeke-täk elementleri her iki ok boýunça deňleşdirmek
Ýeke-täk elementi birwagtda hem gorizontal,
hem-de wertikal oklar boýunça
justify-self we align-self
häsiýetlerini birleşdirip deňleşdirip bolýar.
Gorizontal oküň başy we wertikal oküň merkezi boýunça
Indi birinji elementi üçin gorizontal oküň başy we wertikal oküň merkezi boýunça deňleşdirmäni belleýäris:
<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;
}
:
Gorizontal oküň merkezi we wertikal oküň başy boýunça
Indi bolsa birinji element üçin gorizontal oküň merkezi we wertikal oküň başy boýunça deňleşdirmäni belleýäris:
<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;
}
:
Gorizontal oküň ahyry we wertikal oküň merkezi boýunça
Birinji elementi gorizontal oküň ahyry we wertikal oküň merkezi boýunça deňleşdirýäris:
<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;
}
:
Amaly meseleler
Alty elementden ybarat grid dörediň we olary iki hatar boýunça ýerleşdiriň. Ikinji elementi gorizontal oküň başy we wertikal oküň merkezi boýunça deňleşdiriň.
Indi grid elementlerini üç hatar boýunça ýerleşdiriň we üçünji elementi gorizontal oküň merkezi we wertikal oküň ahyry boýunça deňleşdirmäni beriň.
Öňki meseläni düzedip, dördünji elementiň deňleşdirilşini gorizontal oküň ahyry we wertikal oküň merkezi boýunça ediň.
Indi bolsa, bäşinji elementi gorizontal oküň başy we wertikal oküň başy boýunça, altynjy elementi bolsa gorizontal oküň ahyry we wertikal oküň merkezi boýunça deňleşdiriň.