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 мегирад */
}