Бир пайтлар саҳифа макетини float ва жадваллар билан “йиғиш”га тўғри келарди. Бугун бизда иккита кучли восита бор: Флехбох ва CSS Грид. Иккаласи ҳам барча замонавий браузерларда қўллаб-қувватланади, аммо улар турли вазифалар учун яратилган.
Асосий фарқ: бир ўлчов ва икки ўлчов
Флехбох элементларни битта йўналишда — қатор ёки устун бўйлаб — жойлаштиради. Грид эса қатор ва устунларни бир вақтда бошқаради. Оддий қоида: элементлар бир чизиқда турса — Флехбох, жадвалга ўхшаш макет керак бўлса — Грид.
Флехбох қачон қулай?
- Навигатсия менюси ва тугмалар қатори.
- Элементларни вертикал ва горизонтал марказлаштириш.
- Контент миқдорига қараб кенгаядиган компонентлар.
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}Грид қачон қулай?
- Саҳифанинг умумий макети: ҳеадер, сидебар, контент, фоотер.
- Карталар галереяси.
- Элементлар аниқ қатор ва устунларга текисланиши керак бўлганда.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 24px;
}Юқоридаги битта қатор код ҳеч қандай медиа сўровсиз мослашувчан галерея яратади: экран кенглигига қараб устунлар сони ўзи ўзгаради.
Иккаласини бирга ишлатиш
Амалда энг яхши натижа комбинатсияда: саҳифа макети Гридъда, унинг ичидаги карталар ва тугмалар эса Флехбохъда қурилади. Улар бир-бирини алмаштирмайди, балки тўлдиради.
| Вазифа | Тавсия |
|---|---|
| Меню, тоолбар | Флехбох |
| Карталар галереяси | Грид |
| Саҳифа макети | Грид |
| Марказлаштириш | Иккаласи ҳам |
Аввал контентни ўйланг, кейин воситани танланг: чизиқми ёки тўрми?
