CSS Grid Layout – Müasir Veb Dizaynın Yeni Dövrü

Veb dizayn sahəsində tərtibat (layout) həmişə çətinlik yaradan mövzulardan biri olub. CSS Grid Layout Module bu problemi həll edərək, iki ölçülü (2D) dizaynı daha güclü və çevik bir hala gətirib.

Keçmişdə tərtibat yaratmaq üçün cədvəllər (tables), float, clearfix və CSS positioning kimi metodlardan istifadə olunurdu. Flexbox bu sahədə bir irəliləyiş olsa da, tam mükəmməl bir həll deyildi. CSS Grid Layout nəhayət ki, veb dizayn sahəsində mükəmməl tərtibat həllini təqdim edir.

CSS Grid Layout nədir?

CSS Grid, iki ölçülü tərtibat (grid-based layout) yaratmağa imkan verən müasir CSS moduludur. Sətir və sütun əsaslı işləyir və elementlərin səhifədə istənilən formada və mövqedə yerləşdirilməsini təmin edir.

CSS Grid-in əsas üstünlükləri:

✅ İki ölçülü tərtibat – Sütunlar (columns) və sətirlər (rows) ilə işləyir.

✅ Esnek və dinamik dizayn – Elementlər HTML-dəki sıradan asılı olmadan istənilən yerdə yerləşdirilə bilər.

✅ Güclü hizalama və boşluq idarəetməsi – Elementlər tam nəzarət olunan şəkildə hizalanır.

✅ Flexbox ilə birlikdə istifadə edilə bilər – Grid içində Flexbox istifadə etməklə idealda dizayn həlləri yaratmaq mümkündür.

CSS Grid Layout ilə İlk Dizayn

İlk addım olaraq HTML strukturu yaradırıq:

<div class="wrapper">
   <div class="A">A</div>
   <div class="B">B</div>
   <div class="C">C</div>
   <div class="D">D</div>
   <div class="E">E</div>
   <div class="F">F</div>
</div>

İndi isə CSS Grid xüsusiyyətlərini tətbiq edirik:

.wrapper {
   display: grid;
   grid-template-columns: 100px 10px 100px 10px 100px;
   grid-template-rows: auto 10px auto;
}

💡 İzah:

• grid-template-columns – 3 sütun (hər biri 100px), aralarındakı boşluqlar isə 10px.

• grid-template-rows – 3 sıra (ilk və sonuncu auto, ortadakı isə 10px boşluq).

Elementlərin Yerləşdirilməsi

CSS Grid-də grid-column və grid-row vasitəsilə elementlərin yerini dəqiq təyin edə bilərik:

.A {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.B {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
.C {
    grid-column: 5 / 6;
    grid-row: 1 / 2;
}

✅ Qısa Yazılış (Shorthand) İstifadəsi

Uzun yazmaq əvəzinə grid-area istifadə edərək sətir və sütun aralığını bir sətrə salmaq olar:

.A {
    grid-area: 1 / 1 / 2 / 2;
}

Bu üsul daha qısa və oxunması asan olsa da, grid-column və grid-row daha çox istifadə edilir.

Müasir Veb Dizayn Üçün Grid Layout

CSS Grid Layout sayəsində ənənəvi kublardan ibarət dizaynlardan kənara çıxmaq mümkündür. Məsələn, müasir veb səhifələrdə başlıq (header), əsas məzmun (content), yan menyu (sidebar) və altlıq (footer) kimi bölmələri yerləşdirmək asanlaşır.

HTML strukturu:

<div class="wrapper">
     <div class="header">Başlıq</div>
     <div class="content">Əsas Məzmun</div>
     <div class="sidebar">Yan menyu</div>
     <div class="footer">Altlıq</div>
</div>

CSS Grid tətbiqi:

.wrapper {
  display: grid;
  grid-template-columns: 12.5em 1em 12.5em 1em 12.5em 1em 12.5em;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header header header header header"
    "content content content content content . sidebar"
    "footer footer footer footer footer footer footer";
}

💡 İzah:

• grid-template-areas – Bütün elementlər rəqəmsal şablon kimi göstərilir.

• “content content content content content . sidebar” – Məzmun 5 sütunu tutur, 6-cı sütun boş qalır, 7-ci isə yan menyu üçündür.

• Flexbox ilə birlikdə istifadə edilə bilər – Yan menyu və digər hissələr hizalama üçün Flexbox ilə tamamlanır.

CSS Grid Üstünlükləri

✅ Daha asan hizalama – Mərjin (margin), padding və pozisyon (position) problemləri olmadan dizayn yaratmaq mümkündür.

✅ Sütun və sətirlərin asan idarə edilməsi – Hər bir element sintaktik sıralamadan asılı olmadan yerləşdirilir.

✅ Mobil uyğun tərtibat – CSS Grid responsiv (mobilə uyğun) dizayn üçün idealdır.

✅ Flexbox ilə birlikdə işləyir – Grid və Flexbox birlikdə tam güclü bir dizayn sistemi yaradır.

✅ Daha az kod, daha çevik idarəetmə – Ənənəvi float və pozision metodlarına ehtiyac qalmır.

 

Pulsuz digər resurslar:

Məqalə: Flexbox-u Öyrənin və Təcrübə Edin

Məqalə: CSS Grid-i Öyrənin – Kurs

Məqalə: Nəhayət CSS Grid Layout Modulu ilə Grid-ə Keçin

 

Növbəti mövzular:

Növbəti mövzular:

CSS Basics

Layihələr Yaratmaq

Reaktiv Veb Dizayn

 

Açar Sözlər: CSS Grid Layout, CSS Grid nədir, Grid ilə veb dizayn, CSS Grid və Flexbox fərqləri, Veb səhifələr üçün Grid sistemləri,  Müasir veb dizayn prinsipləri, SEO üçün optimallaşdırılmış CSS Grid, Mobil uyğun Grid Layout, Grid və HTML strukturlaşdırma, Grid ilə responsiv dizayn yaratmaq, CSS Grid sütun və sətir idarəetməsi, Grid vs. Float – hansı daha yaxşıdır?, Grid layout və SEO əlaqəsi, Axtarış motorları üçün optimallaşdırılmış tərtibat,  CSS Grid və istifadəçi təcrübəsi