CSS grid-da gorizontal okyň üstündäki mazmuny deňlemek
Gridde diňe ýerleşdirmek däl, eýsem mazmuny gorizontal okyň
boýunça deňlemek hem gerek bolup biler. Bu ýagdaýda biz
atal elementde berilýän justify-content
häsiýetini ulanyarys.
Bu häsiýetiň nädip işleýändigine mysallar bilen seredeliň.
Oküň başy boýunça
Elementlerimizi gorizontal oküň başy boýunça deňläýliň:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-content: start;
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;
}
:
Oküň merkezi boýunça
Indi bolsa elementlerimizi gorizontal oküň merkezi boýunça deňläýliň:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-content: center;
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;
}
:
Oküň soňy boýunça
Elementlerimizi gorizontal oküň soňy boýunça deňläýliň:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-content: end;
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;
}
:
Amaly wezipeler
Iki sütun üstünde ýerleşen alty elementden ybarat grid dörediň. Elementleri gridiň gorizontal okyň başy boýunça deňläň.
Indi elementleri üç sütun üstünde ýerleşdiriň we olary gridiň gorizontal oküň merkezi boýunça deňläň.
Öňki wezipäni elementleriň deňlenişi gridiň gorizontal oküň soňy boýunça bolýan ýaly üýtgediň.