Grid elementlarini tekislash

CSS Grid elementlari — tekislash

Grid elementlar o‘z grid kataklari ichida quyidagi xossalar bilan tekislanishi mumkin:

Bular grid konteynerda justify-items va align-items yordamida konteynerdagi barcha grid elementlarga qo‘llanishi ham mumkin.

justify-self xossasi grid elementni o‘z grid katagi ichida inline yo‘nalishda tekislash uchun ishlatiladi.

Maslahat: Ingliz tilidagi sahifalarda inline yo‘nalish chapdan o‘ngga, blok yo‘nalishi yuqoridan pastgadir.

Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

Eslatma: Bu xossa tekislash effektiga ega bo‘lishi uchun grid elementning inline yo‘nalishda o‘z atrofida bo‘sh joyi kerak.

justify-self xossasidan foydalanish:

.item1 {justify-self: right;}
.item6 {justify-self: center;}

Natija:

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

align-self xossasi grid elementni o‘z grid katagi ichida blok yo‘nalishida tekislash uchun ishlatiladi.

Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

Eslatma: Bu xossa tekislash effektiga ega bo‘lishi uchun grid elementning blok yo‘nalishda o‘z atrofida bo‘sh joyi kerak.

align-self xossasidan foydalanish:

.item1 {align-self: start;}
.item6 {align-self: center;}