Кай вақт аст, ки барои тартиб додани унсурҳо флекс ва гридҳоро истифода барем?

Флексбокс (Flexbox) ва CSS Grid барои эҷоди макетҳо пешбинӣ шудаанд.

Flexbox барои:

• Макетҳои якмавзӯӣ: Тартиб ва тақсимоти элементҳо дар як самт (хатт ё сутун).
• Тартиби дохилӣ: ҷойгиркунии элементҳо дар дохили контейнер дар ҳамоҳангӣ бо горизонталӣ ва/ё вертикалӣ.
• Эҷоди компонентҳои адаптивӣ: Осон тағир додани самт ва тартиби элементҳо вобаста ба андозаи экран.
• Гурӯҳҳои хурди элементҳо: менюи навигатсия, кортҳои маҳсулот, элементҳои форма.

.container-flex {
  display: flex; /* Муайян мекунад, ки контейнер ҳамчун флекс-контейнер аст */
  justify-content: center; /* Тартиб додани элементҳо дар маркази ҳамоҳангӣ */
  align-items: center; /* Тартиб додани элементҳо дар маркази ҳамоҳангӣ вертикалӣ */
}

Grid барои:

• Макетҳои дуҷониба: Эҷоди шабакаҳои мураккаб бо идоракунии ҳамзамон дар сатриҳо ва сутунҳо.
• Макро-компонент: ҷойгиркунии унсурҳои асосии саҳифа (сарлавҳа, панели паҳлӯӣ, мундариҷа, поёнӣ).
• Эҷоди макетҳои мураккаби ҷавобгӯ: Осон муайян кардани минтақаҳо ва ҷойгиркунии онҳо барои андозаҳои гуногуни экран.
• Контроли пурра дар ҷойгиркунии элементҳо: муайян кардани дақиқи ҷойгиршавии ҳар як элемент дар шабака.

.container-grid {
  display: grid; /* Муайян мекунад, ки контейнер ҳамчун грид-контейнер аст */
  grid-template-columns: 1fr 2fr 1fr; /* Муайян мекунад, ки се сутун бо пропорсияҳои гуногун */
  grid-template-rows: auto 1fr auto; /* Муайян мекунад, ки се сатр */
  gap: 10px; /* Илова мекунад фосилаҳо байни элементҳои шабака */
}

.item {
  grid-column: 2; /* ҷойгир мекунад элемент дар сутуни дуввум */
  grid-row: 1 / span 2; /* ҷойгир мекунад элемент дар сатрҳои аввал ва мегирад 2 сатрро */
}

Вақте ки истифода бурдан:

• Грид барои сохтори асосии саҳифа (макро-сохтор), ва флексбокс барои тартиб додани элементҳо дар дохили ҳуҷраҳои шабака (микро-сохтор).
• Масалан, грид барои муайян кардани ҷойгиркунии панел ва мундариҷа, ва флексбокс барои ҷойгиркунии элементҳо дар дохили панел (менюи навигатсия).

Хулоса:

Имкониятҳо	Flexbox	Grid
Меъёргирӣ	Якмавзӯӣ	Думақомӣ
Истифодаи асосӣ	Внутриҳии тартиб, компонентҳо	Макро-тартиб, шабакаҳои мураккаб
Назорат	Дар асосӣ дар як ось	Дар ду ось ҳамзамон
Ҳамкорӣ бо дигар технологияҳо	Хуб	Хуб

Интихоб вобаста ба вазифа ва мураккабии макети талабшуда.