CSS Grid va Flexbox: zamonaviy joylashuv tizimlari

Veb-sahifada elementlarni to'g'ri joylashtirish har qanday frontend dasturchining kundalik vazifasi hisoblanadi. Bir necha yil oldin bu ish float va position kabi usullar yordamida ancha mashaqqatli bajarilar edi, chunki ular dastlab joylashuv uchun emas, balki boshqa maqsadlar uchun mo'ljallangan edi. Bugungi kunda esa CSS bizga ikkita kuchli va maxsus joylashuv tizimini taqdim etadi: Flexbox va Grid. Ushbu ikkala texnologiya zamonaviy interfeyslarni qurishning asosini tashkil qiladi va ularni chuqur tushunish har bir dasturchi uchun zarur.

Ko'pchilik boshlovchilar Flexbox bilan Grid o'rtasida qaysi birini tanlashda adashadi. Aslida bu ikkala texnologiya bir-biriga raqobatchi emas, balki bir-birini to'ldiruvchi vositalardir. Ularning asosiy farqini tushunib olsangiz, har bir vaziyatda to'g'ri qarorni qabul qila olasiz. Ushbu maqolada biz har ikkala tizimning asoslarini, ularning o'zaro farqini va amaliy loyihalarda qanday birgalikda ishlatishni batafsil ko'rib chiqamiz.

Flexbox va Grid: asosiy farq nimada?

Eng muhim farqni bitta jumla bilan ifodalash mumkin: Flexbox bir o'lchovli joylashuv tizimi bo'lib, elementlarni faqat bitta o'q bo'ylab — yoki qator (gorizontal), yoki ustun (vertikal) bo'ylab tartibga soladi. Grid esa ikki o'lchovli tizim bo'lib, elementlarni bir vaqtning o'zida ham qator, ham ustun bo'ylab boshqarish imkonini beradi. Ya'ni Grid yordamida siz to'liq jadval ko'rinishidagi tuzilmani yaratasiz.

Amaliyotda bu farq qanday namoyon bo'ladi? Agar sizga navigatsiya menyusidagi havolalarni bir qatorga tizish, tugmalarni yonma-yon joylashtirish yoki kartochkaning ichki elementlarini markazlashtirish kerak bo'lsa, Flexbox eng yaxshi tanlov hisoblanadi. Agar esa siz butun sahifaning umumiy tuzilishini — sarlavha, yon panel, asosiy kontent va pastki qism kabi bo'limlarni — bir butun sifatida tartibga solmoqchi bo'lsangiz, bunda Grid ancha qulay va mantiqiy yondashuvni taqdim etadi.

Flexbox asoslari

Flexbox bilan ishlashni boshlash uchun ota element (konteyner) ga display: flex xususiyatini berishingiz kifoya. Shundan so'ng uning barcha bevosita bolalari flex-elementlarga aylanadi va ularni turli xususiyatlar yordamida boshqarishingiz mumkin bo'ladi. Eng ko'p ishlatiladigan xususiyatlar quyidagilar: justify-content asosiy o'q bo'ylab, align-items esa ko'ndalang o'q bo'ylab joylashuvni boshqaradi, gap esa elementlar orasidagi masofani belgilaydi.

.container {
  display: flex;
  justify-content: space-between; /* gorizontal taqsimlash */
  align-items: center;           /* vertikal markazlashtirish */
  gap: 16px;                     /* elementlar orasi masofa */
}

.item {
  flex: 1; /* har bir element teng joy egallaydi */
}

Yuqoridagi misolda justify-content: space-between elementlarni konteyner kengligi bo'ylab teng taqsimlaydi va birinchi hamda oxirgi elementni chetlarga taqaydi. align-items: center esa ularni vertikal markazga keltiradi. flex: 1 qiymati har bir bolaga bo'sh joyni teng ulushda taqsimlashni buyuradi, bu esa moslashuvchan ustunlar yaratishda juda foydali. Flexboxning eng kuchli tomoni — uning tarkibdagi elementlar o'lchamiga qarab avtomatik moslashishidir.

Grid asoslari

Grid bilan ishlash uchun konteynerga display: grid beriladi, so'ngra grid-template-columns orqali ustunlar tuzilishi aniqlanadi. Bu yerda fr (fraction — ulush) birligi alohida ahamiyatga ega. U mavjud bo'sh joyni nisbatlarga bo'lib taqsimlaydi, masalan 1fr 2fr degani birinchi ustun ikkinchisidan ikki marta tor bo'ladi degani. gap xususiyati esa Flexboxdagi kabi qator va ustunlar orasidagi masofani boshqaradi.

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* uch ustun */
  grid-template-rows: auto;
  gap: 20px;
}

/* Murakkab tuzilma uchun grid-area */
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }

Ikkinchi misolda grid-template-areas xususiyati orqali biz sahifaning vizual xaritasini matn ko'rinishida chizdik. Bu yondashuv kodni nihoyatda o'qishli qiladi, chunki siz bevosita CSS ichida qaysi element qayerda joylashishini ko'rib turasiz. Har bir nomlangan hudud o'z elementiga grid-area orqali biriktiriladi. Grid ana shu murakkab ikki o'lchovli tuzilmalarni yaratishda Flexboxdan ancha ustun turadi.

Ikkala texnologiyani birga ishlatish

Eng yaxshi natijaga Flexbox va Gridni birgalikda ishlatganda erishiladi. Odatda Grid sahifaning umumiy karkasini — katta bo'limlarni — tartibga solish uchun, Flexbox esa har bir bo'lim ichidagi mayda elementlarni — masalan kartochka ichidagi rasm, matn va tugmani — joylashtirish uchun ishlatiladi. Bunday yondashuv "makro" va "mikro" darajadagi joylashuvni mantiqiy ravishda ajratadi.

/* Sahifa karkasi — Grid */
.page {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Kartochka ichi — Flexbox */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Bu misolda kartochkalar to'plami Grid yordamida uch ustunga tizilgan, har bir kartochka ichidagi elementlar esa Flexbox orqali vertikal ravishda tartibga solingan. Aynan shu uslub zamonaviy veb-saytlarning aksariyatida qo'llaniladi va u kodni tartibli, kengaytirishga qulay holatda saqlaydi.

Responsive joylashuv va eski usuldan farqi

Responsive dizayn — turli ekran o'lchamlariga moslashish — har ikkala texnologiyada ham juda oson amalga oshiriladi. Grid uchun repeat(auto-fit, minmax(250px, 1fr)) kabi sehrli kombinatsiya ekran kengligiga qarab ustunlar sonini avtomatik o'zgartiradi, hech qanday media-query talab qilmaydi. Flexbox uchun esa flex-wrap: wrap xususiyati elementlarni joy yetmaganda yangi qatorga o'tkazadi.

Eski float usuli bilan solishtirganda bu texnologiyalarning ustunligi yaqqol ko'rinadi. Float dastlab matn ichida rasmlarni o'rash uchun yaratilgan bo'lib, uni joylashuv uchun ishlatish ko'plab muammolarni — masalan konteyner balandligining yo'qolishi (clearfix kerak bo'lishi) va vertikal markazlashtirishning deyarli imkonsizligini — keltirib chiqarardi. Flexbox va Grid esa aynan joylashuv uchun yaratilgan, shuning uchun ular bilan vertikal markazlashtirish, teng ustunlar va moslashuvchan tuzilmalar bir necha qator kod bilan hal qilinadi. Xulosa qilib aytganda, zamonaviy frontend ishida float endi joylashuv vositasi sifatida ishlatilmaydi va uning o'rnini to'liq Flexbox bilan Grid egallagan.