gap
Misol
Qatorlar orasidagi va ustunlar orasidagi bo‘shliqni 50px qilib belgilang:
.grid-container {
gap: 50px;
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
gap xususiyati flexbox, grid yoki ko‘p ustunli maketda qatorlar orasidagi va ustunlar orasidagi bo‘shliq o‘lchamini belgilaydi. U quyidagi xususiyatlar uchun qisqartma xususiyatdir:
| Standart qiymat: | normal normal |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS Box Alignment moduli, 3-daraja |
| JavaScript sintaksisi: | object.style.gap="50px 100px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| gap (Grid’da) | 66 | 16 | 61 | 12 | 53 |
| gap (Flexbox’da) | 84 | 84 | 63 | 14.1 | 70 |
| gap (ko‘p ustunli maketda) | 66 | 16 | 61 | 14.1 | 53 |
CSS sintaksisi
gap: row-gap column-gap|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| row-gap | Grid yoki flexbox maketida qatorlar orasidagi bo‘shliq o‘lchamini o‘rnatadi | Demo ❯ |
| column-gap | Grid, flexbox yoki ko‘p ustunli maketda ustunlar orasidagi bo‘shliq o‘lchamini o‘rnatadi | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Grid maketi
Grid maketida qatorlar orasidagi bo‘shliqni 20px, ustunlar orasidagisini esa 50px qilib belgilang:
#grid-container {
display: grid;
gap: 20px 50px;
}
O‘zingiz sinab ko‘ring »
Flexbox maketi
Flexbox maketida qatorlar orasidagi bo‘shliqni 20px, ustunlar orasidagisini esa 70px qilib belgilang:
#flex-container {
display: flex;
gap: 20px 70px;
}
O‘zingiz sinab ko‘ring »
Ko‘p ustunli maket
Ko‘p ustunli maketda ustunlar orasidagi bo‘shliqni 50px qilib belgilang:
#newspaper {
columns: 3;
gap: 50px;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS Grid maketi
CSS darsligi: CSS Flexbox maketi
CSS darsligi: CSS ko‘p ustunli maket
CSS ma’lumotnomasi: row-gap xususiyati
CSS ma’lumotnomasi: column-gap xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!