როგორ ქმნით განლაგებას CSS Grid-ით?

Question

Accepted Answer

**CSS Grid** არის ორგანზომილებიანი განლაგების სისტემა — ის კონტროლირებს **რიგებს და სვეტებს ერთდროულად**, განსხვავებით Flexbox-ის ერთხელი ხაზისაგან. თქვენ განსაზღვრავთ ბადეს კონტეინერზე და განათავსებთ ელემენტებს მასში.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## fr ერთეული და repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` ("ფრაქცია") ანაწილებს ხელმისაწვდომ სივრცეს — `1fr 2fr` ყოფს მას 1:2 თანაფარდობით. `repeat(3, 1fr)` არის სტენოგრაფია სამი თანაბარი ტრეკისთვის.

## რესპონსიული ბადე BEZ მედია შეკითხვების

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

ეს ერთი ხაზი ქმნის სრულიად რესპონსიულ კარტების ბადეს: თითოეული სვეტი მინიმუმ `250px` არის; ბრაუზერი ერგებს **რამდენი შესაძლებელია** თითო რიგში და გადაახვევს დანარჩენს — ავტომატურად გადამოწმდება 4 სვეტიდან დესკტოპზე 1-მდე მობილურზე. `auto-fit` + `minmax` არის ერთ-ერთი Grid-ის ყველაზე სიყვარულით სიტყვა.

## ელემენტების განთავსება ყუთებში

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

ელემენტები შეიძლება გაიმეორონ მრავალი რიგი/სვეტი, რაც აძლევს ჟურნალის სტილის განლაგებას, რაც უცნაური არის Flexbox-ში.

## Grid წინააღმდეგ Flexbox

- **Grid** — 2D განლაგება (რიგები *და* სვეტები): გვერდის განლაგებები, კარტის ბადეები, დაფები.
- **Flexbox** — 1D განლაგება (ერთი რიგი ან სვეტი): ნავიგაციის ზღვრები, ღილაკის ჯგუფები, ცენტრირება.

ისინი კარგად შედგებიან — grid ელემენტი თავისთავად შეიძლება იყოს flex კონტეინერი.

## რატომ აქვს მნიშვნელობა

Grid არის ყველაზე ძლიერი CSS განლაგების ინსტრუმენტი — ის სუფთად აკმენს მთელი გვერდის განლაგებებს და რესპონსიულ კარტების ბადეებს, ხშირად ცვლის ჩასმული-div ხრიკებს.

`auto-fit`/`minmax` რესპონსიული შაბლონი ერთი აკმელი ხსნის მრავალი მედია შეკითხვის საჭიროებას.