CSS Grid nima?

CSS Grid Layout (yoki oddiy CSS Grid) CSS'da ikki o'lchovli joylashish tizimidir. U elementlarning satrlar (gorizontal) va ustunlar (vertikal) bo'yicha joylashishini boshqarishga imkon beradi va murakkab tarmoq tuzilmalarini yaratib, interfeyslar qurishga yordam beradi.

CSS Grid ning asosiy tushunchalari quyidagilardir:

Grid konteyner: display: grid yoki display: inline-grid xususiyati qo'llanadigan element. Bu elementning vorislari Grid Elementlariga aylanadi.
Grid Elementlari: To'g'ridan-to'g'ri Grid konteynerining vorislari.
Grid chiziqlari: Tarmoqni tashkil etadigan ajratuvchi chiziqlar. Ular nomlangan yoki raqamli indeksga ega bo'lishi mumkin.
Grid yo'nalishlari: Tarmoq orasidagi bo'shliq — bu ustun yoki satr.
Grid hujayralari: Eng kichik birlik bo'lib, satr va ustun kesishmasidan tashkil topgan.
Grid hududlari: Bir yoki bir nechta hujayralarni egallagan to'g'ri burchakli hudud.

CSS Grid bilan ishlash uchun asosiy xususiyatlar quyidagilardir:

Konteyner uchun:

display: grid | inline-grid;
grid-template-columns: Tarmoq ustunlarini belgilaydi.
grid-template-rows: Tarmoq satrlarini belgilaydi.
grid-template-areas: Tarmoq nomlangan hududlarini belgilaydi.
gap | row-gap | column-gap: Hujayralar orasidagi bo'shliqni belgilaydi.
justify-items | align-items | place-items: Hujayralar ichidagi mazmunni asosiy va transversal o'qlar bo'ylab joylashtirish.
justify-content | align-content | place-content: Tarmoq chiziqlarini konteyner ichida joylashtirish.

Elementlar uchun (Grid Elementlari):

grid-column-start | grid-column-end | grid-column: Element qaysi ustun chiziqlarini egallashini belgilaydi.
grid-row-start | grid-row-end | grid-row: Element qaysi satr chiziqlarini egallashini belgilaydi.
grid-area: Elementga nomlangan tarmoq hududini tayinlaydi yoki uning joylashuvini chiziqlar yordamida belgilaydi.
justify-self | align-self | place-self: Elementning o'zini o'zi joylashtirish.

CSS Grid kuchli vositalar bilan moslashuvchan va murakkab dizaynlar yaratishga imkon beradi va ilgari float, inline-block yoki absolyut pozitsiyalashdan foydalanishni osonlashtiradi.

.container {
  display: grid; /* Elementni Grid konteyneriga aylantiradi */
  grid-template-columns: 1fr 1fr 1fr; /* 3 teng kenglikdagi ustunlar yaratadi */
  grid-template-rows: auto auto; /* 2 avtomatik balandlikdagi satrlar yaratadi */
  gap: 10px; /* Hujayralar orasiga bo'shliq qo'shadi */
}

.item {
  /* Kontayner ichidagi elementlar avtomatik ravishda Grid Elementlariga aylanadi */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Birinchi element 1-chi va 3-chi ustunlarni egallaydi */
}