Grid — CSS Grid Layout ma’nosida veb elementlarni satr va ustunlardan iborat ikki o‘lchamli tizimda joylashtirish mexanizmidir. U sahifa skeleti, card to‘plami, dashboard va murakkab tekislangan layoutlarni yaratadi. Grid container qator hamda ustun tracklarini belgilaydi, bevosita bolalar esa grid item bo‘ladi.
Track va fr birligi
grid-template-columns ustunlarni, grid-template-rows qatorlarni belgilaydi. fr mavjud bo‘shliqdagi ulushni ifodalaydi.
.layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 20rem;
gap: 1.5rem;
}
Asosiy qism qolgan bo‘shliqni, yon panel 20 remni oladi. minmax(0, 1fr) uzun kontent sabab birinchi track containerdan chiqib ketishining oldini oladi.
Takroriy ustunlar
Card grid ko‘pincha quyidagicha yoziladi:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
minmax cardning minimal enini va ortiqcha bo‘shliqni olish qobiliyatini beradi. auto-fit bo‘sh tracklarni yig‘adi, auto-fill esa mavjud bo‘sh track tuzilishini saqlashi mumkin. Ularning farqi katta containerda itemlar kam bo‘lganda ko‘rinadi.
Item joylashuvi
Item grid line raqami, nomlangan line yoki area orqali joylashadi. grid-column: 1 / -1 birinchi chiziqdan oxirgisigacha cho‘zadi. Named area layoutni o‘qiladigan shaklda ifodalaydi.
.page {
display: grid;
grid-template-areas: "header header" "main aside";
}
.header { grid-area: header; }
Implicit grid template’da ko‘rsatilmagan itemlar uchun avtomatik track yaratadi. grid-auto-flow auto-placement yo‘nalishini boshqaradi. dense bo‘sh joyni to‘ldirish uchun keyingi itemni oldinga olib kelishi mumkin, bu vizual tartibni DOMdan farqlaydi.
Tekislash
justify-items itemni o‘z grid area ichida inline axis bo‘yicha, align-items block axis bo‘yicha joylashtiradi. justify-content va align-content esa butun grid tracklar guruhi containerdan kichik bo‘lganda bo‘shliqni taqsimlaydi. place-items align va justify uchun qisqa yozuvdir.
Grid va Flexbox
Grid satr va ustunni birgalikda boshqaradi. Flexbox esa bir yo‘nalish bo‘yicha kontent oqimi va bo‘shliq taqsimotida kuchli. Sahifa ikki o‘lchamli grid, cardning ichki toolbar qismi Flexbox bo‘lishi mumkin. Ular raqib emas, turli layout muammosini yechadigan vositalardir.
Responsive xatti-harakat
Media query grid template’ni breakpointda o‘zgartirishi mumkin. Ba’zi card layoutlar auto-fit va minmax bilan alohida breakpoint talab qilmaydi. Subgrid ichki komponentning satr yoki ustunlarini ota grid tracklari bilan tekislaydi; brauzer qo‘llovi loyiha talabiga mos tekshiriladi.
Vizual reorder DOM tartibini o‘zgartirmaydi. Heading va focus ketma-ketligi semantik HTMLda mantiqiy qolishi accessibility uchun muhim.
Intrinsic tracklar
auto, min-content va max-content track o‘lchamini kontentning tabiiy talabiga bog‘laydi. fit-content() trackni kontentga mos o‘stirib, maksimal chegara bilan to‘xtatadi. 1fr ko‘pincha minmax(auto, 1fr)ga yaqin minimumga ega bo‘lgani uchun uzun so‘z gridni kengaytirishi mumkin; minmax(0, 1fr) qisqarishga ruxsat beradi. Jadvalga o‘xshash tekislashda column eni eng katta item kontentidan ta’sirlanadi. Shu sababli real ma’lumot, uzun nom va lokalizatsiya bilan test qilish zarur.
Overlap va stacking
Grid itemlar bir area’da ustma-ust joylashishi mumkin. Bu hero rasm ustidagi matn kabi kompozitsiya uchun ishlatiladi. Paint tartibi va z-index qaysi item yuqorida turishini belgilaydi. Overlap matn kontrasti va click targetni yashirmasligi kerak. Absolute positioningdan farqli ravishda grid item track o‘lchamida ishtirok etishi mumkin.
Bog‘liq tushunchalar
CSS Grid, Flexbox, grid track, fr unit, minmax, responsive design, subgrid