CSS Grid nədir?

CSS Grid Layout (və ya sadəcə CSS Grid) CSS-də iki ölçülü yerləşdirmə sistemidir. O, elementlərin həm sətirlərdə (üfüqi), həm də sütunlarda (şaquli) yerləşdirilməsini idarə etməyə imkan verir və mürəkkəb şəbəkə strukturları yaradaraq interfeyslərin qurulmasına kömək edir.

CSS Grid-in əsas anlayışları aşağıdakılardır:

Grid konteyner: display: grid və ya display: inline-grid xüsusiyyəti tətbiq olunan element. Bu elementin törəmələri Grid Elementlərinə çevrilir.
Grid Elementləri: Birbaşa Grid konteynerinin törəmələri.
Grid xətləri: Şəbəkəni formalaşdıran ayırıcı xətlər. Onlar adlandırıla və ya ədədi indeksə malik ola bilər.
Grid izləri: Şəbəkədəki iki xətt arasındakı boşluq — bu, sütun və ya sətir ola bilər.
Grid hüceyrələri: Şəbəkənin ən kiçik vahidi, sətir və sütunun kəsişməsindən ibarətdir.
Grid sahələri: Bir və ya bir neçə hüceyrəni əhatə edən düzbucaqlı sahə.

CSS Grid ilə işləmək üçün əsas xüsusiyyətlər aşağıdakılardır:

Konteyner üçün:

display: grid | inline-grid;
grid-template-columns: Şəbəkənin sütunlarını müəyyən edir.
grid-template-rows: Şəbəkənin sətirlərini müəyyən edir.
grid-template-areas: Şəbəkənin adlandırılmış sahələrini müəyyən edir.
gap | row-gap | column-gap: Hüceyrələr arasındakı boşluqları müəyyən edir.
justify-items | align-items | place-items: Hüceyrələr daxilində məzmunun əsas və transversal oxlar üzrə yerləşdirilməsi.
justify-content | align-content | place-content: Şəbəkə xətlərinin konteyner daxilində yerləşdirilməsi.

Elementlər üçün (Grid Elementləri):

grid-column-start | grid-column-end | grid-column: Elementin hansı sütun xətlərini tutduğunu müəyyən edir.
grid-row-start | grid-row-end | grid-row: Elementin hansı sətir xətlərini tutduğunu müəyyən edir.
grid-area: Elementə adlandırılmış şəbəkə sahəsi təyin edir və ya onun mövqeyini xətlər vasitəsilə müəyyən edir.
justify-self | align-self | place-self: Elementin özünü yerləşdirməsi.

CSS Grid güclü vasitələr təqdim edir ki, bu da adaptiv və mürəkkəb tərtibatların yaradılmasını asanlaşdırır və əvvəlki float, inline-block və ya mütləq mövqeləndirmə ilə edilən işləri əhəmiyyətli dərəcədə sadələşdirir.

.container {
  display: grid; /* Elementi Grid konteynerinə çevirir */
  grid-template-columns: 1fr 1fr 1fr; /* 3 bərabər genişlikdə sütun yaradır */
  grid-template-rows: auto auto; /* 2 avtomatik hündürlüklü sətir yaradır */
  gap: 10px; /* Hüceyrələr arasında boşluq əlavə edir */
}

.item {
  /* Konteynerin içindəki elementlər avtomatik olaraq Grid Elementlərinə çevrilir */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Birinci element 1-dən 3-ə qədər olan sütunları tutur */
}