CSS Grid โ bu CSS'ning ikki o'lchovli (2D) layout texnologiyasi. Flexbox bir o'lchamda ishlasa (gorizontal yoki vertikal), Grid ikkalasi bir vaqtda. Bu murakkab veb-layout'lar uchun ideal. CSS Grid 2017 yilda chiqdi va modern veb-dizaynni juda yengillashtirdi. Bugun katta veb sayt'lar Grid bilan asosiy layout qiladi.
Grid asosiy tushunchalari
Flexbox kabi, Grid'da ham container va items bor. Container'ga display: grid beriladi.
Misol:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
Bu kod 3 ta teng kenglikdagi ustun yaratadi va items har biriga joylashtiriladi.
Grid lines va tracks
Grid \"lines\" (chiziqlar) va \"tracks\" (yo'lakchalar) bilan ishlaydi. Tracks โ ustunlar va qatorlar (rows va columns). Lines โ ular orasidagi chegaralar.
3 ta ustun bo'lsa, 4 ta vertikal line bor (1, 2, 3, 4).
grid-template-columns va grid-template-rows
Bu xususiyatlar ustunlar va qatorlar o'lchamini belgilaydi.
grid-template-columns: 200px 1fr 100px โ 3 ta ustun: birinchi 200px, ikkinchi qolgan joyni egallaydi, uchinchi 100px.
grid-template-rows: 100px auto 50px โ 3 ta qator: yuqori 100px, o'rta auto (kontent o'lchamida), pastki 50px.
fr birligi
fr (fraction) โ Grid'ning maxsus birligi. Qo'shimcha joyni qancha egallashni belgilaydi.
1fr 2fr 1fr โ 3 ta ustun: birinchi va uchinchi bitta birlik, o'rta ikki birlik egallaydi.
repeat funksiyasi
Bir xil o'lchamli ko'p ustun yoki qator yaratish uchun:
grid-template-columns: repeat(4, 1fr) โ 4 ta teng ustun.
grid-template-columns: repeat(3, 200px 1fr) โ 6 ta ustun, 200px va 1fr almashinib.
Auto-fill va auto-fit
Responsive grid uchun:
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) โ bo'sh joy yetganicha ustunlar yaratiladi, har biri minimum 200px, qolgan joy egallanadi.
Bu mobile va desktop uchun bir xil kod ishlaydi.
grid-column va grid-row
Items'ga grid'da aniq joylashtirish:
.item {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
Bu item 1-line dan 3-line gacha (2 ta ustun keng), 1-line dan 2-line gacha qator joylashadi.
span โ necha cell egallashi
Lines o'rniga span ham ishlatish mumkin:
grid-column: span 2 โ 2 ta ustun keng.
grid-row: span 3 โ 3 ta qator baland.
grid-template-areas โ eng kuchli
Grid'ning eng samarali xususiyati โ named areas:
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 100px 1fr 50px;
grid-template-areas:
\"header header\"
\"sidebar main\"
\"footer footer\";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
Bu butun sayt layout vizual ko'rinishida. Header butun ustun, sidebar chap, main o'rtada, footer butun ustun.
Mobile responsive Grid
Media queries bilan layout o'zgartirish:
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-areas:
\"header\"
\"main\"
\"sidebar\"
\"footer\";
}
}
Mobile'da bir ustun, vertikal joylashish. Code o'zgarishi minimal.
Misol: e-commerce product grid
.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
Bu mahsulot kartochkalar grid โ har biri minimum 250px, ekran kengligi'ga moslashadi.
Flexbox vs Grid โ qachon nima
Flexbox: bir o'lchovli layout (qator yoki ustun). Misol: navigation, button row.
Grid: ikki o'lchovli layout (butun sayt struktura, mahsulot katalog). Misol: header-sidebar-main-footer, product grid.
Ko'p loyihada ikkalasi birga ishlatiladi. Grid butun sahifa layout uchun, Flexbox kichik kompozitlar uchun.
Browser qo'llab-quvvatlash
CSS Grid barcha modern brauzerlar tomonidan qo'llab-quvvatlanadi. IE 11 ham qisman (eski sintaksis), lekin hozir IE deyarli ishlatilmaydi.
Sayt.uz va Grid
Sayt.uz blog kategoriya sahifa va asosiy layout Grid bilan qurilgan. Header (logo + nav + login), main content, sidebar (kategoriyalar), footer โ barchasi Grid template areas bilan.
Blog post ro'yxati ham Grid: repeat(auto-fill, minmax(280px, 1fr)). Desktop 3-4 ustun, mobile 1 ustun. Bir kod, ko'p layout.