Grid oraliqlari

CSS Grid bo‘shliqlari (gaps)

Grid konteynerdagi qatorlar va ustunlar orasidagi bo‘shliqlar gap (yoki gutter) deb ataladi.

Bo‘shliqlar grid qatorlari va ustunlari orasida yaratiladi — grid konteynerning tashqi chetlarida emas.

Gapning standart o‘lchami 0 — bu grid elementlar orasida bo‘shliq yo‘qligini anglatadi.

Gap o‘lchamini quyidagi xossalar bilan sozlash mumkin:

column-gap xossasi griddagi ustunlar orasidagi bo‘shliqni belgilaydi.

Grid ustunlari orasiga 50 piksel bo‘shliq belgilash:

.container {
display: grid;
column-gap: 50px;
}

Natija:

row-gap xossasi griddagi qatorlar orasidagi bo‘shliqni belgilaydi.

Grid qatorlari orasiga 50 piksel bo‘shliq belgilash:

.container {
display: grid;
row-gap: 50px;
}

Natija:

gap xossasi row-gap va column-gap uchun qisqartma xossadir.

Agar bitta qiymat berilsa, u qatorlar ham, ustunlar ham uchun bir xil bo‘shliq qo‘llaydi.

Agar ikki qiymat berilsa, birinchi qiymat row-gap ni, ikkinchi qiymat column-gap ni belgilaydi.

Bitta qiymat bilan — qatorlar va ustunlar orasidagi bo‘shliqni 50px qilish:

.container {
display: grid;
gap: 50px;
}

Natija:

Ikki qiymat bilan — qatorlar orasidagi bo‘shliqni 30px, ustunlar orasidagini 100px qilish:

.container {
display: grid;
gap: 30px 100px;
}

Natija:

Xususiyat	Tavsif
column-gap	To‘r ustunlari orasidagi bo‘shliqni belgilaydi
gap	row-gap va column-gap uchun qisqartma xususiyat
row-gap	To‘r qatorlari orasidagi bo‘shliqni belgilaydi

Yutuqlaringizni kuzating – bu bepul!