CSS Grid ва Flexbox: замонавий жойлашув тизимлари

Веб-саҳифада элементларни тўғри жойлаштириш ҳар қандай фронтенд дастурчининг кундалик вазифаси ҳисобланади. Бир неча йил олдин бу иш float ва position каби усуллар ёрдамида анча машаққатли бажарилар эди, чунки улар дастлаб жойлашув учун эмас, балки бошқа мақсадлар учун мўлжалланган эди. Бугунги кунда эса CSS бизга иккита кучли ва махсус жойлашув тизимини тақдим этади: Flexbox ва Grid. Ушбу иккала технология замонавий интерфейсларни қуришнинг асосини ташкил қилади ва уларни чуқур тушуниш ҳар бир дастурчи учун зарур.

Кўпчилик бошловчилар Flexbox билан Grid ўртасида қайси бирини танлашда адашади. Аслида бу иккала технология бир-бирига рақобатчи эмас, балки бир-бирини тўлдирувчи воситалардир. Уларнинг асосий фарқини тушуниб олсангиз, ҳар бир вазиятда тўғри қарорни қабул қила оласиз. Ушбу мақолада биз ҳар иккала тизимнинг асосларини, уларнинг ўзаро фарқини ва амалий лойиҳаларда қандай биргаликда ишлатишни батафсил кўриб чиқамиз.

Flexbox ва Grid: асосий фарқ нимада?

Энг муҳим фарқни битта жумла билан ифодалаш мумкин: Flexbox бир ўлчовли жойлашув тизими бўлиб, элементларни фақат битта ўқ бўйлаб — ёки қатор (горизонтал), ёки устун (вертикал) бўйлаб тартибга солади. Grid эса икки ўлчовли тизим бўлиб, элементларни бир вақтнинг ўзида ҳам қатор, ҳам устун бўйлаб бошқариш имконини беради. Яъни Grid ёрдамида сиз тўлиқ жадвал кўринишидаги тузилмани яратасиз.

Амалиётда бу фарқ қандай намоён бўлади? Агар сизга навигация менюсидаги ҳаволаларни бир қаторга тизиш, тугмаларни ёнма-ён жойлаштириш ёки карточканинг ички элементларини марказлаштириш керак бўлса, Flexbox энг яхши танлов ҳисобланади. Агар эса сиз бутун саҳифанинг умумий тузилишини — сарлавҳа, ён панел, асосий контент ва пастки қисм каби бўлимларни — бир бутун сифатида тартибга солмоқчи бўлсангиз, бунда Grid анча қулай ва мантиқий ёндашувни тақдим этади.

Flexbox асослари

Flexbox билан ишлашни бошлаш учун ота элемент (контейнер) га display: flex хусусиятини беришингиз кифоя. Шундан сўнг унинг барча бевосита болалари флекс-элементларга айланади ва уларни турли хусусиятлар ёрдамида бошқаришингиз мумкин бўлади. Энг кўп ишлатиладиган хусусиятлар қуйидагилар: justify-content асосий ўқ бўйлаб, align-items эса кўндаланг ўқ бўйлаб жойлашувни бошқаради, gap эса элементлар орасидаги масофани белгилайди.

.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 */
}

Юқоридаги мисолда justify-content: space-between элементларни контейнер кенглиги бўйлаб тенг тақсимлайди ва биринчи ҳамда охирги элементни четларга тақайди. align-items: center эса уларни вертикал марказга келтиради. flex: 1 қиймати ҳар бир болага бўш жойни тенг улушда тақсимлашни буюради, бу эса мослашувчан устунлар яратишда жуда фойдали. Flexboxнинг энг кучли томони — унинг таркибдаги элементлар ўлчамига қараб автоматик мослашишидир.

Grid асослари

Grid билан ишлаш учун контейнерга display: grid берилади, сўнгра grid-template-columns орқали устунлар тузилиши аниқланади. Бу ерда fr (fraction — улуш) бирлиги алоҳида аҳамиятга эга. У мавжуд бўш жойни нисбатларга бўлиб тақсимлайди, масалан 1fr 2fr дегани биринчи устун иккинчисидан икки марта тор бўлади дегани. gap хусусияти эса Flexboxдаги каби қатор ва устунлар орасидаги масофани бошқаради.

.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; }

Иккинчи мисолда grid-template-areas хусусияти орқали биз саҳифанинг визуал харитасини матн кўринишида чиздик. Бу ёндашув кодни ниҳоятда ўқишли қилади, чунки сиз бевосита CSS ичида қайси элемент қаерда жойлашишини кўриб турасиз. Ҳар бир номланган ҳудуд ўз элементига grid-area орқали бириктирилади. Grid ана шу мураккаб икки ўлчовли тузилмаларни яратишда Flexboxдан анча устун туради.

Иккала технологияни бирга ишлатиш

Энг яхши натижага Flexbox ва Gridни биргаликда ишлатганда эришилади. Одатда Grid саҳифанинг умумий каркасини — катта бўлимларни — тартибга солиш учун, Flexbox эса ҳар бир бўлим ичидаги майда элементларни — масалан карточка ичидаги расм, матн ва тугмани — жойлаштириш учун ишлатилади. Бундай ёндашув «макро» ва «микро» даражадаги жойлашувни мантиқий равишда ажратади.

/* 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;
}

Бу мисолда карточкалар тўплами Grid ёрдамида уч устунга тизилган, ҳар бир карточка ичидаги элементлар эса Flexbox орқали вертикал равишда тартибга солинган. Айнан шу услуб замонавий веб-сайтларнинг аксариятида қўлланилади ва у кодни тартибли, кенгайтиришга қулай ҳолатда сақлайди.

Responsive жойлашув ва эски усулдан фарқи

Responsive дизайн — турли экран ўлчамларига мослашиш — ҳар иккала технологияда ҳам жуда осон амалга оширилади. Grid учун repeat(auto-fit, minmax(250px, 1fr)) каби сеҳрли комбинация экран кенглигига қараб устунлар сонини автоматик ўзгартиради, ҳеч қандай медиа-сўров талаб қилмайди. Flexbox учун эса flex-wrap: wrap хусусияти элементларни жой етмаганда янги қаторга ўтказади.

Эски float усули билан солиштирганда бу технологияларнинг устунлиги яққол кўринади. Float дастлаб матн ичида расмларни ўраш учун яратилган бўлиб, уни жойлашув учун ишлатиш кўплаб муаммоларни — масалан контейнер баландлигининг йўқолиши (clearfix керак бўлиши) ва вертикал марказлаштиришнинг деярли имконсизлигини — келтириб чиқарарди. Flexbox ва Grid эса айнан жойлашув учун яратилган, шунинг учун улар билан вертикал марказлаштириш, тенг устунлар ва мослашувчан тузилмалар бир неча қатор код билан ҳал қилинади. Хулоса қилиб айтганда, замонавий фронтенд ишида float энди жойлашув воситаси сифатида ишлатилмайди ва унинг ўрнини тўлиқ Flexbox билан Grid эгаллаган.