CSS Grid - HTML va CSS | Softromeda Edu

Grid - sahifa tuzilmasini qurish uchun yaratilgan eng kuchli CSS vositasi. Flexbox bir o'lchamli bo'lsa, Grid qator va ustunlarni bir vaqtda boshqaradi.

Birinchi tarmoq #

CSS

.tarmoq {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    gap: 1rem;
}

Grid qator va ustunlardan iborat tarmoq hosil qiladi

`fr` - Grid ning maxsus birligi #

fr (fraction) - bo'sh joyning ulushi:

CSS

/* Uchta teng ustun */
.a { grid-template-columns: 1fr 1fr 1fr; }

/* Qisqartma */
.b { grid-template-columns: repeat(3, 1fr); }

/* Nisbatlar: 25% / 50% / 25% */
.c { grid-template-columns: 1fr 2fr 1fr; }

/* Aralash: qat'iy + moslashuvchan */
.d { grid-template-columns: 250px 1fr; }

/* Yon panel + mazmun + yon panel */
.e { grid-template-columns: 200px 1fr 200px; }

fr va % farqi

CSS

/* Muammo: gap qo'shilganda sig'maydi */
.foiz { grid-template-columns: 33.33% 33.33% 33.33%; gap: 1rem; }

/* To'g'ri: fr gap ni hisobga oladi */
.fr { grid-template-columns: repeat(3, 1fr); gap: 1rem; }

fr gap dan keyin qolgan joyni bo'ladi. Shuning uchun Grid da har doim fr ishlating.

Avtomatik moslashuvchan tarmoq #

Grid ning eng kuchli imkoniyati - media so'rovlarsiz moslashuvchan tarmoq:

CSS

.kartalar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

Bu bitta qator quyidagilarni bajaradi:

Har bir ustun kamida 280px
Sig'sa - ko'proq ustun hosil qiladi
Sig'masa - kamroq ustun
Qolgan joyni teng bo'ladi

auto-fill + minmax = avtomatik moslashuvchan tarmoq

auto-fill va auto-fit

CSS

/* auto-fill: bo'sh ustunlar ham yaratiladi */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

/* auto-fit: bo'sh ustunlar yig'iladi, mavjudlari kengayadi */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

Elementlar kam bo'lganda farq seziladi: auto-fit bilan 2 ta kartochka butun kenglikni egallaydi, auto-fill bilan chapda qolib, o'ngda bo'sh joy qoladi.

Element joylashuvi #

CSS

.element {
    /* Chiziq raqamlari bo'yicha */
    grid-column: 1 / 3;         /* 1-chiziqdan 3-chiziqgacha = 2 ustun */
    grid-row: 1 / 2;

    /* Qisqa: nechta katak egallashi */
    grid-column: span 2;
    grid-row: span 3;

    /* Oxirigacha */
    grid-column: 1 / -1;        /* butun qatorni egallaydi */
}

CSS

.tarmoq {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.katta      { grid-column: span 2; grid-row: span 2; }
.keng       { grid-column: span 2; }
.butun-qator{ grid-column: 1 / -1; }

`grid-template-areas` - eng tushunarli usul #

CSS

.sahifa {
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "sarlavha sarlavha sarlavha"
        "menyu    mazmun   yon"
        "past     past     past";
    gap: 1.5rem;
    min-height: 100vh;
}

.sarlavha { grid-area: sarlavha; }
.menyu    { grid-area: menyu; }
.mazmun   { grid-area: mazmun; }
.yon      { grid-area: yon; }
.past     { grid-area: past; }

CSS dagi matn tuzilmasi vizual joylashuvni aynan takrorlaydi

grid-template-areas ning kuchi

Kodga qarab sahifa qanday ko'rinishini darhol tasavvur qilasiz. Bu boshqa hech qanday CSS usulida yo'q. Mobil versiya uchun esa faqat shu qismini qayta yozish yetarli:

CSS

@media (max-width: 768px) {
    .sahifa {
        grid-template-columns: 1fr;
        grid-template-areas:
            "sarlavha"
            "mazmun"
            "menyu"
            "yon"
            "past";
    }
}

E'tibor bering: menyu mobil versiyada mazmun dan keyin turadi - HTML ni o'zgartirmasdan tartibni almashtirish mumkin.

Tekislash #

CSS

.tarmoq {
    /* Kataklar ichidagi mazmun */
    justify-items: stretch;    /* gorizontal: start, center, end, stretch */
    align-items: stretch;      /* vertikal */
    place-items: center;       /* ikkalasi birga */

    /* Butun tarmoqni konteyner ichida */
    justify-content: start;    /* gorizontal */
    align-content: start;      /* vertikal */
    place-content: center;
}

.element {
    /* Faqat shu element */
    justify-self: end;
    align-self: center;
    place-self: center;
}

Markazlashtirishning eng qisqa usuli

CSS

.markaz {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

Ikki qator - Flexbox dagi uchtadan ham qisqa.

Amaliy misollar #

1. Blog tuzilmasi #

CSS

.blog {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2.5rem;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

@media (max-width: 900px) {
    .blog {
        grid-template-columns: 1fr;
    }
}

minmax(0, 1fr) nima uchun kerak?

Grid ustunining minimal o'lchami standart holatda auto - ya'ni u mazmunidan kichik bo'lolmaydi. Uzun kod bloki yoki jadval ustunni kengaytirib yuboradi va tuzilma buziladi.

minmax(0, 1fr) bu muammoni hal qiladi. Flexbox dagi min-width: 0 ning analogi.

2. Fotogalereya #

CSS

.galereya {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 200px;
    gap: 0.75rem;
}

.galereya img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Ba'zi rasmlar kattaroq */
.galereya img:nth-child(1),
.galereya img:nth-child(6) {
    grid-column: span 2;
    grid-row: span 2;
}

3. Narxlar jadvali #

CSS

.narxlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.tarif {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 1rem;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

.tarif--mashhur {
    border-color: #2563eb;
    border-width: 2px;
    transform: scale(1.03);
}

4. Forma joylashuvi #

CSS

.forma {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.maydon--keng {
    grid-column: 1 / -1;       /* butun qatorni egallaydi */
}

@media (max-width: 640px) {
    .forma { grid-template-columns: 1fr; }
}

5. Dashboard #

CSS

.dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(120px, auto);
    gap: 1.25rem;
}

.widget--kichik { grid-column: span 1; }
.widget--orta   { grid-column: span 2; }
.widget--keng   { grid-column: span 4; }
.widget--baland { grid-row: span 2; }

Grid va Flexbox birga #

Bu eng keng tarqalgan yondashuv:

CSS

/* Grid: sahifa tuzilmasi */
.sahifa {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

/* Flexbox: komponent ichi */
.karta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.karta__past {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

Vazifa	Vosita
Sahifa tuzilmasi	Grid
Kartochkalar tarmog'i	Grid
Galereya	Grid
Sarlavha paneli	Flexbox
Tugmalar guruhi	Flexbox
Kartochka ichi	Flexbox
Ikonka + matn	Flexbox

Grid ni ko'rish #

DevTools da Grid inspektori

Chrome DevTools da grid konteynerini tanlasangiz, display: grid yonida kichik grid yorlig'i paydo bo'ladi. Uni bosing - brauzer barcha chiziqlar, ularning raqamlari va grid-template-areas nomlarini sahifa ustida ko'rsatadi.

Bu Grid ni o'rganishning eng tez usuli.

Amaliy topshiriq

grid-template-areas bilan klassik sahifa tuzilmasi quring: sarlavha, yon menyu, mazmun, o'ng panel, footer.
Media so'rov bilan uni mobil versiyada bitta ustunga aylantiring.
repeat(auto-fit, minmax(280px, 1fr)) bilan kartochkalar tarmog'ini quring - oynani kichraytirib moslashishini kuzating.
Fotogalereya yarating: ba'zi rasmlar span 2 bilan kattaroq bo'lsin.
place-items: center bilan elementni ekran markaziga qo'ying.
minmax(0, 1fr) siz uzun kod bloki qo'yib, tuzilma buzilishini ko'ring, so'ng tuzating.
Chrome DevTools da Grid inspektorini yoqing va chiziqlarni kuzating.
cssgridgarden.com o'yinini o'ynang.

Xulosa #

Grid ikki o'lchamli: qator va ustunlarni bir vaqtda boshqaradi.
fr - bo'sh joy ulushi; % dan farqli o'laroq gap ni hisobga oladi.
repeat(auto-fit, minmax(280px, 1fr)) media so'rovlarsiz moslashuvchan tarmoq beradi.
grid-template-areas tuzilmani ko'rinadigan qilib yozish imkonini beradi.
grid-column: 1 / -1 elementni butun qatorga yoyadi.
minmax(0, 1fr) uzun mazmun tuzilmani buzishining oldini oladi.
place-items: center - markazlashtirishning eng qisqa usuli.
Amalda: Grid sahifa uchun, Flexbox komponent ichi uchun.

Keyingi bo'limda saytni barcha ekranlarga moslashtirishni o'rganamiz.