DarslarWeb dasturlash

CSS Grid va chiroyli formalar

Ikki o'lchovli joylashuv tizimi — CSS Grid, hamda zamonaviy chiroyli formalar dizayni.

40 daqiqa

CSS Advanced — Dars 11

Grid va chiroyli formalar

Grid bilan istagan layout'ni qurasiz. Forma esa — sayt va foydalanuvchi orasidagi ko'prik.

gridgrid-templategapform

Dars rejasi

5 ta mavzu

01Grid nima va Flexbox'dan farqi
02grid-template-columns va rows
03gap, fr va repeat()
04grid-column / grid-row — katak egallash
05Chiroyli forma dizayni

1. Grid nima?

CSS Grid — ikki o'lchovli (2D) joylashuv tizimi. Ya'ni qator va ustunlarni birga boshqarish mumkin. Flexbox — bir o'lchovli (1D), grid esa — ikki o'lchovli.

Flexbox: bir qator YOKI bir ustun.
Grid: bir vaqtda qator VA ustun. Jadval singari.

1.ota {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;  /* 3 teng ustun */
4  gap: 16px;
5}

2. grid-template-columns va rows

grid-template-columns — ustunlar soni va o'lchami. grid-template-rows — qatorlar.

1.a { grid-template-columns: 200px 200px 200px; }  /* 3 ta 200px ustun */
2.b { grid-template-columns: 1fr 2fr 1fr; }        /* o'rtasi 2 baravar katta */
3.c { grid-template-columns: 250px 1fr; }          /* sidebar + asosiy */
4.d { grid-template-rows: 60px 1fr 40px; }         /* header, main, footer */

3. gap va repeat()

1.grid {
2  display: grid;
3  grid-template-columns: repeat(4, 1fr);  /* 4 ta teng ustun */
4  gap: 20px;                              /* ham row, ham column */
5}
6
7/* Responsiv */
8.grid-res {
9  display: grid;
10  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
11  gap: 16px;
12}

Grid galereyasi

HTML

Natijajonli

4. grid-column / grid-row — katak egallash

Bitta element bir nechta katakni egallashi mumkin. Buning uchun grid-column va grid-row ishlatiladi.

1.katta {
2  grid-column: span 2;  /* 2 ustun egallaydi */
3  grid-row: span 2;     /* 2 qator egallaydi */
4}
5
6/* Aniqroq: */
7.hero {
8  grid-column: 1 / 4;  /* 1-chi chiziqdan 4-chi chiziqgacha */
9}

Bento-stil grid

HTML

<div class="bento">
  <div class="cell c1">Asosiy (2x2)</div>
  <div class="cell c2">2</div>
  <div class="cell c3">3</div>
  <div class="cell c6">Ustun (1x2)</div>
  <div class="cell c4">Keng (2x1)</div>
  <div class="cell c5">5</div>
  <div class="cell c7">Pastki keng</div>
</div>

Natijajonli

Interaktiv o'yin

Grid Garden — Grid'ni o'ynab o'rganing

28 bosqichli o'yin: suvni to'g'ri ustun va qatorlarga tarqating. Grid'ni mustahkamlash uchun eng yaxshi usul.

5. Chiroyli forma dizayni

Forma — foydalanuvchi bilan eng ko'p muloqot joyi. Uning chiroyli va qulay bo'lishi saytning muvaffaqiyatiga bevosita ta'sir qiladi.

Inputlar bir-biridan uzoq bo'lishi kerak (margin yoki gap).
Label har doim inputning tepasida yoki chapida aniq ko'rinsin.
:focus holatida input yorqin chegara olsin.
Tugmalar katta va bosish oson bo'lsin.

Zamonaviy ro'yxatdan o'tish formasi

HTML

<div class="karta">
  <h2>Ro'yxatdan o'tish</h2>
  <p class="sub">Yangi akkaunt yarating</p>

<form>
    <div class="row">
      <div class="field">
        <label>Ism</label>
        <input placeholder="Ali">
      </div>
      <div class="field">
        <label>Familiya</label>
        <input placeholder="Aliyev">
      </div>
    </div>

<div class="field">
      <label>Email</label>
      <input type="email" placeholder="ali@example.com">
    </div>

<div class="field">
      <label>Parol</label>
      <input type="password" placeholder="••••••••">
    </div>

<button type="submit">Akkaunt ochish</button>
  </form>
</div>

Natijajonli

Kichik test

0 / 5

1.Grid va Flexbox asosiy farqi?

2.3 ta teng ustun uchun eng oson yozuv qaysi?

3.Ekranga moslashuvchi avtomatik grid qolipi qaysi?

4.Element 2 ustunni egallashi uchun?

5.fr birligi nimani bildiradi?

Mustaqil ish

0 / 7