UI-dizayndagi modulli to‘rlar: ustunlar, oraliqlar, chekkalar

Qisqacha: to‘r nima

Modulli to‘r — dizayner interfeys elementlarini joylashtiradigan ko‘rinmas yo‘naltiruvchi chiziqlar to‘plami. U kontent qayerdan boshlanib, qayerda tugashini, bloklar qanday kenglikda bo‘lishi va ular orasida qancha masofa turishini belgilaydi.

To‘rsiz har bir ekran «ko‘z bilan» yig‘iladi va bir oydan keyin loyihada o‘nlab turli oraliqlar paydo bo‘ladi. To‘r bilan qarorlar bir marta qabul qilinadi, keyin elementlar shunchaki o‘z joyiga tushadi.

Ustunli to‘r nimalardan iborat

• Ustunlar (columns) — kontent kengligi bo‘linadigan vertikal yo‘laklar. Blok bitta yoki bir nechta ustunni egallashi mumkin.
• Ustunlararo oraliqlar (gutters) — ustunlar orasidagi bo‘shliqlar. Ularga kontent qo‘yilmaydi, ular «havo» beradi.
• Chekkalar (margins) — ekran chetidan birinchi va oxirgi ustungacha bo‘lgan masofa.

Konteyner kengligi shunday yig‘iladi: ustunlar + ular orasidagi gutter’lar + chetlardagi margin’lar. Ustunlar odatda moslashuvchan va cho‘ziladi, gutter va margin esa qat’iy bo‘ladi.

Birga ishlatiladigan uch xil to‘r

Nega aynan 8

8 soni 2 va 4 ga oson bo‘linadi, keng tarqalgan ekran o‘lchamlari ham 8 ga yaxshi bo‘linadi. 8, 16, 24, 32, 48, 64 qiymatlari ko‘zga aniq farqlanadi va tushunarli shkala hosil qiladi. Mayda detallar — ikonkalar, tugma ichidagi oraliqlar uchun 4 qadamga ruxsat beriladi.

Asosiy foyda sonning sehrida emas, balki tanlovni cheklashda: dizayner 1 dan 100 gacha istalgan son emas, qisqa shkaladan tanlaydi, dasturchi esa u yerda 13 edimi yoki 15 mi deb taxmin qilib o‘tirmaydi.

Odatiy sozlamalar

Bu standart emas, balki keng tarqalgan boshlang‘ich nuqtalar. Masalan, Material Design’ning moslashuvchan to‘ri ham turli ekran kengliklari uchun 4, 8 va 12 ustundan foydalanadi.

Nega desktopda 12 ustun ommabop: 12 soni 2, 3, 4 va 6 ga bo‘linadi, shuning uchun bir qatorda ikki, uch, to‘rt yoki olti kartochkali joylashuvni yig‘ish oson.

To‘r ishlab chiqishga qanday yordam beradi

Maketdagi to‘r to‘g‘ridan-to‘g‘ri CSS’ga o‘tkaziladi. Dasturchi har bir oraliqni o‘lchashi shart emas: har bir breakpoint uchun ustunlar soni, gutter va margin’ni bilish kifoya.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 16px;
  max-width: 1280px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .container { grid-template-columns: repeat(8, 1fr); gap: 24px; padding: 0 32px; }
}

@media (min-width: 1200px) {
  .container { grid-template-columns: repeat(12, 1fr); }
}

Agar dizaynda 8pt tizimi ishlatilsa, uni o‘zgaruvchilar yoki tokenlar sifatida rasmiylashtirish qulay (--space-1: 8px, --space-2: 16px va hokazo) — shunda maket va kod bir tilda gaplashadi.

Figma’da to‘rni qanday sozlash

1. Freymni tanlang va o‘ng panelda Layout grid qo‘shing.
2. Columns turini tanlang, ustunlar sonini, Gutter va Marginni kiriting, Stretch turini belgilang.
3. Vertikal ritm uchun 4 yoki 8 qadamli Rows yoki Grid turidagi ikkinchi to‘rni qo‘shing.
4. Bir xil o‘lchamdagi barcha ekranlarga qo‘llash uchun sozlamani uslub sifatida saqlang.

Ko‘p uchraydigan xatolar

• Matn va rasmlarni gutter’larga joylashtirish.
• To‘rni «ko‘rinish uchun» qo‘yib, elementlarni unga tekislamaslik.
• Bir xil o‘lchamdagi ekranlarda turli to‘rlardan foydalanish.
• 8pt shkalani 13 yoki 22 kabi tasodifiy qiymatlar bilan buzish.
• Mobil to‘rni unutib, desktop to‘rini siqishga urinish.