Grid Item — grid-column, grid-row, span

~15 daq · CSS · Layout — Grid

Muammodan boshlaylik

Yangiliklar sahifasi: 4 ustunli to'r, lekin asosiy yangilik ikki ustun kenglikda va ikki qator balandlikda bo'lishi kerak. Yoki: galereyada ba'zi rasmlar boshqalardan kattaroq. Yoki: banner butun kenglikda, to'rning o'rtasida.

20-darsdagi grid-template-areas oldindan ma'lum tuzilma uchun yaxshi. Lekin elementlar soni o'zgaruvchan bo'lsa (yangiliklar, mahsulotlar) — har biri uchun zona yozib bo'lmaydi. Bu yerda elementning o'zi qancha joy olishini aytadi.

Chiziqlar bilan joylashtirish

18-darsdan: grid chiziqlari 1 dan raqamlanadi. 3 ustunli to'rda 4 ta vertikal chiziq bor:

   1        2        3        4
   │        │        │        │
   ├────────┼────────┼────────┤
   │        │        │        │

.item {
  grid-column: 1 / 3;     /* 1-chiziqdan 3-chiziqqacha → 2 ustun */
  grid-row: 1 / 2;        /* 1-qator */
}

Format: boshlanish / tugash. Tugash chizig'i kirmaydi — 1 / 3 — 1 va 2-ustunlar.

To'liq yozuv:

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

Manfiy raqamlar — oxirdan sanash

.full-width {
  grid-column: 1 / -1;    /* birinchi chiziqdan OXIRGI chiziqqacha */
}

-1 — oxirgi chiziq, -2 — oxiridan ikkinchi. 1 / -1 — butun kenglik, ustunlar nechta bo'lishidan qat'i nazar. Darsning boshidagi banner:

.banner {
  grid-column: 1 / -1;
}

To'r 3 ustunli bo'lsin yoki 12 — banner har doim to'liq kenglikda.

[!INFO] Manfiy raqamlar faqat aniq belgilangan (explicit) to'rda ishlaydi — grid-template-columns / rows bilan yaratilgan chiziqlarda. Avtomatik yaratilgan qatorlar (19-dars: grid-auto-rows) uchun grid-row: 1 / -1 kutilganday ishlamaydi.

span — nechta katak

Ko'pincha "qayerdan" emas, "nechta" muhim:

.featured {
  grid-column: span 2;    /* 2 ustun kenglikda — qayerda tushsa ham */
  grid-row: span 2;       /* 2 qator balandlikda */
}

Darsning boshidagi asosiy yangilik:

.news {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 16px;
}

.news-main {
  grid-column: span 2;
  grid-row: span 2;
}

┌─────────────────┬────────┬────────┐
│                 │   2    │   3    │
│   asosiy (1)    ├────────┼────────┤
│                 │   4    │   5    │
├────────┬────────┼────────┼────────┤
│   6    │   7    │   8    │   9    │
└────────┴────────┴────────┴────────┘

Qolgan elementlar avtomatik bo'sh kataklarga joylashadi.

Aralash:

.item {
  grid-column: 2 / span 3;   /* 2-chiziqdan boshlab 3 ustun */
}

grid-area — to'rtta qiymat bitta joyda

grid-area — 20-darsda zona nomi uchun ishlatildi, lekin u chiziqlar bilan ham ishlaydi:

.item {
  grid-area: 1 / 2 / 3 / 4;
  /* row-start / column-start / row-end / column-end */
}

Tartibni eslab qolish qiyin, shuning uchun amalda grid-column va grid-row alohida yozilgani o'qishga osonroq.

Ustma-ust joylashtirish

Grid ning noyob imkoniyati: bir nechta element bitta katakda bo'lishi mumkin. Rasm ustida matn — position: absolute (23-dars) siz:

<figure class="hero">
  <img src="tog.jpg" alt="Tog' manzarasi">
  <figcaption>Chimyon tog'lari</figcaption>
</figure>

.hero {
  display: grid;
}

.hero > * {
  grid-area: 1 / 1;          /* hammasi 1-qator, 1-ustunda */
}

.hero figcaption {
  align-self: end;            /* pastga */
  padding: 24px;
  color: white;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.7));
}

Afzalligi absolute ga nisbatan: konteyner eng katta elementga qarab o'lchanadi — matn uzun bo'lsa, blok o'zi kattalashadi va matn rasmdan chiqib ketmaydi.

Qaysi biri ustida turishi — HTML tartibi bo'yicha (keyingisi ustida) yoki z-index bilan (24-dars).

Bitta elementni tekislash

19-darsdagi justify-items / align-items ni bitta element uchun bekor qilish:

.item {
  justify-self: center;    /* katak ichida gorizontal o'rtada */
  align-self: end;         /* katak ichida pastda */
}

.badge {
  place-self: start end;   /* align-self + justify-self: yuqori o'ng burchakda */
}

order

Flexbox dagi kabi (16-dars) — avtomatik joylashuvdagi tartibni o'zgartiradi:

.item-promo {
  order: -1;     /* avtomatik joylashuvda birinchi */
}

Va xuddi Flexbox dagi kabi ogohlantirish: faqat vizual, klaviatura va ekran o'quvchilar HTML tartibida yuradi.

Amaliy misol: 12 ustunli to'r

Ko'p dizayn tizimlarining asosi (19-dars):

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

.col-12 { grid-column: span 12; }
.col-8  { grid-column: span 8; }
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }

<div class="grid-12">
  <main class="col-8">Kontent</main>
  <aside class="col-4">Sidebar</aside>
  <div class="col-4">Kartochka</div>
  <div class="col-4">Kartochka</div>
  <div class="col-4">Kartochka</div>
</div>

Bootstrap ning col-md-8 class lari aynan shu g'oyani — Grid gacha float va Flexbox bilan — amalga oshirgan.

Nima uchun shunday?

Nima uchun grid chiziqlari 0 dan emas, 1 dan raqamlanadi — dasturlashda sanash odatda 0 dan boshlanadi-ku?

Chunki CSS dizaynerlar va sahifa mualliflari uchun ham yaratilgan, va odamlar chiziqlarni sanaganda tabiiy ravishda 1 dan boshlaydi: "birinchi chiziqdan uchinchi chiziqqacha". Bundan muhimroq qaror — elementlar kataklar bo'yicha emas, chiziqlar bo'yicha joylashtirilishi. "1-katakdan 2-katakkacha" noaniq (2-katak kiradimi?), "1-chiziqdan 3-chiziqqacha" esa aniq. Manfiy raqamlar (-1 — oxirgi chiziq) bilan esa siz to'rning o'lchamini bilmasdan ham "butun kenglik" deya olasiz — bu responsive dizaynda, ustunlar soni ekranga qarab o'zgarganda, juda qimmatli.

Xulosa

Eslab qoling:

  • Chiziqlar 1 dan; grid-column: 1 / 3 — 1 va 2-ustunlar (tugash chizig'i kirmaydi)
  • 1 / -1 — butun kenglik, ustunlar sonidan qat'i nazar
  • span 2 — 2 ta katak, qayerda tushsa ham; 2 / span 3 — aralash
  • grid-area: 1 / 1 — bir nechta elementni bitta katakka (ustma-ust)
  • justify-self, align-self, place-self — bitta elementni katak ichida tekislash
  • order — faqat vizual
  • 12 ustunli to'r: repeat(12, minmax(0, 1fr)) + span N

Keyingi dars

22-dars: Grid — auto-fill, auto-fit, minmax