როგორ მუშაობს grid-template-areas და რესპონსიული ბადეები?

Question

Accepted Answer

`grid-template-areas` საშუალებას გაძლევთ ბადის განლაგება **ვიზუალურად** რეგიონების დასახელებით, რაც რთულ გვერდის განლაგებას ადვილი კითხვის და მარტივი რესპონსიული თანმიმდევრობის მქონე ხდის.

## დასახელებული ზონების განსაზღვრა

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

ASCII-art `grid-template-areas` *არის* განლაგება — შეგიძლიათ სტრუქტურა ერთი შეხედვით დაინახოთ, და სახელის გამეორება რეგიონს უჯრედებზე მოიფარება.

## მობილური მოწყობილობისთვის თავიდან ორგანიზაცია — უბრალოდ გადახაზეთ რუკა

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

მოწყობილობის მთელი განლაგების ცვლილებისთვის, თქვენ უბრალოდ გადახაზეთ ფართობის რუკა — HTML და `grid-area` მინიშნებები იგივე რჩება. ეს გაცილებით წმინდაა, ვიდრე თითოეული ელემენტის ცალკე გადაადგილება.

## რატომ არის ეს ძლიერი

- **თვითდაკომენტირებული** — CSS ვიზუალურად ასახავს გადაწერილ განლაგებას.
- **მოწყობილობის წყაროს ბრძანებიდან განცალკევებული** — ელემენტები შეიძლება განთავსდეს HTML ბრძანების მიუხედავად (კარგია `main` პირველ რიგში მოათავსოთ DOM-ში ხელმისაწვდომობისთვის, თქვენ კი ვიზუალურად პირველი გაჩვენოთ სიმბოლოთი).
- **ადვილი რესპონსიული ხელმეორე ნაკადი** — აირჩიეთ ზონის შაბლონი რეკვიზიტის თითოეული ფუნქციისთვის.

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

დასახელებული ბადის ზონები გვერდის დონის განლაგებას (header/sidebar/main/footer) აკეთებს კითხვადი და ტრივიალურად რესპონსიული — რეორგანიზაცია აშკარაა ASCII რუკის რედაქტირება, პოზიციის გადაკაბელებული არა.

ეს ერთ-ერთი უმარტივესი, ყველაზე ზედმიწევნივი განლაგების ტექნიკა, რომელსაც CSS გთავაზობთ.