CSS Grid эмне?

CSS Grid Layout (же жөн гана CSS Grid) — бул CSSте эки өлчөмдүү системасы. Ал элементтердин жайгашуусун башкарууга мүмкүндүк берет, ошондой эле интерфейстерди түзүү үчүн татаал тор структураларын түзөт.

CSS Gridтин негизги концепциялары:

• Grid Container: display: grid же display: inline-grid касиети колдонулган элемент. Бул элементтин мураскорлору Grid Items болот.
• Grid Items: Түз мураскорлору Grid Containerдин.
• Grid Lines: Торду түзгөн бөлүү сызыктары. Атын берүү же сандык индекс болушу мүмкүн.
• Grid Tracks: Тор сызыктарынын ортосундагы кеңдик — бул колонна же ред.
• Grid Cells: Тордун эң кичинекей бирдиги, ред жана колонна кесилишинен түзүлөт.
• Grid Areas: Бир нече клетканы ээлеген түз төрт бурчтуу аймак.

CSS Grid менен иштөө үчүн негизги касиеттер:

Контейнер үчүн:

• display: grid | inline-grid;
• grid-template-columns: Тордун колонналарын аныктайт.
• grid-template-rows: Тордун реддерин аныктайт.
• grid-template-areas: Аты менен берилген аймактарды аныктайт.
• gap | row-gap | column-gap: Клеткалардын ортосундагы аралыктар.
• justify-items | align-items | place-items: Клеткалардын ичиндеги мазмунду негизги жана жуптаркы ось боюнча жайгаштыруу.
• justify-content | align-content | place-content: Тордун жолдорун контейнер ичинде жайгаштыруу.

Элементтер үчүн (Grid Items):

• grid-column-start | grid-column-end | grid-column: Элемент кайсы колонна сызыктарын ээлейт.
• grid-row-start | grid-row-end | grid-row: Элемент кайсы ред сызыктарын ээлейт.
• grid-area: Элементке аталыштуу аймакты белгилөө же анын ордуна сызыктар аркылуу аныктоо.
• justify-self | align-self | place-self: Элементти анын клеткасынын ичинде жайгаштыруу.

CSS Grid күчтүү каражаттарды сунуштайт, алар адаптивдүү жана татаал макеттерди түзүүгө мүмкүндүк берет, бул мурда float, inline-block же абсолюттук жайгаштыруу колдонулчу тапшырмаларды жеңилдетет.

.container {
  display: grid; /* Элементти Grid контейнер кылуу */
  grid-template-columns: 1fr 1fr 1fr; /* 3 бирдей кеңдиктеги колонна түзүү */
  grid-template-rows: auto auto; /* 2 автоматтык бийиктиктеги ред түзүү */
  gap: 10px; /* Клеткелердин ортосундагы аралыктар */
}

.item {
  /* Контейнердеги элементтер автоматтык түрдө Grid Items болот */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Биринчи элемент 1ден 3кө чейин колонналарды ээлейт */
}