CSS grid-de mazmunyň iki ok boýunça deňleşdirilmesi
Gridde köplenç mazmuny bir wagtda
gorizontal we düşel oklar boýunça
deňleşdirmek zerur bolup biler.
Bu maksat üçin biz öňki sapakda gözden geçirilen
iki aýratynlygy bilelikde ulanyp bileris:
justify-content we
align-content.
Düşel ok başy we gorizontal ok soňy boýunça
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: flex-end;
align-content: flex-start;
grid-template-columns: 100px 100px;
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;
}
:
Düşel ok soňy we gorizontal ok başy boýunça
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: flex-start;
align-content: flex-end;
grid-template-columns: 100px 100px;
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;
}
:
Düşel ok we gorizontal ok merkezi boýunça
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: flex-end;
align-content: center;
grid-template-columns: 100px 100px;
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
Alty elementden ybarat bolan grid dörediň we olary iki sütün üçin ýerleşdiriň. Elementleri gorizontal ok başy we düşel ok merkezi boýunça deňleşdiriň.
Indi grid elementlerini üç sütün üçin ýerleşdiriň we elementleri gorizontal ok merkezi we düşel ok soňy boýunça deňleşdirmek üçin bellik beriň.
Öňki wezipäni üýtgediň, şonuň üçin elementleriň deňleşdirilmegi gorizontal ok soňy we düşel ok merkezi boýunça bolsun.