𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
Acha kupambana na mipangilio yako ya CSS.
Nilikuwa nikitumia saa nyingi kurekebisha mipangilio iliyovurugika kwa kutumia Flexbox. Nilijaribu kuweka vitu kwenye mstari mmoja, lakini kitu cha mwisho kingajinyoosha kote kwenye kioo. Ilionekana vibaya. Nilijaribu kutumia margins na mbinu nyingine za ziada, lakini hakuna kilichofanya kazi.
Kisha nikabadili mtazamo wangu na kuanza kutumia CSS Grid.
Tofauti ni rahisi:
- Flexbox ni kwa ajili ya mipangilio ya upande mmoja (one-dimensional). Itumie kwa mstari mmoja au safu (column) moja.
- CSS Grid ni kwa ajili ya mipangilio ya pande mbili (two-dimensional). Itumie unapohitaji kudhibiti mistari (rows) na safu (columns) kwa wakati mmoja.
Fikiria Flexbox kama chombo cha kazi ndogo ndogo. Fikiria Grid kama chombo cha muundo mzima wa ukurasa wako.
Mtego wa Flexbox: Unapotumia Flexbox kwa ajili ya gallery, vitu vinaweza visipangike vizuri kwenye kila saizi ya kioo. Mara nyingi huishia kuwa na vitu vya "orphan" (vilivyojitenga) ambavyo huvuruga mdundo wa usanifu wako.
Suluhisho la Grid: Kwa kutumia Grid, unaweza kutengeneza gallery zinazobadilika kulingana na kioo (responsive) kwa mstari mmoja tu wa kodi.
Tumia hii:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Hii inaambia kivinjari (browser) kuweka safu nyingi zaidi za 250px zinazowezekana. Kivinjari hufanya hesabu hiyo kwa ajili yako. Hakuna tena kukisia. Hakuna tena mistari iliyovurugika.
Mfano wa Dashboard: Kujenga dashboard yenye sidebar, maudhui makuu, na footer ni vigumu kwa kutumia Flexbox. Mara nyingi unahitaji kuweka containers ndani ya nyingine na kodi iliyochafuka ili kufanya footer ienee upana wote.
Kwa kutumia Grid, unafafanua njia (tracks) mara moja tu:
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
Unaweza kuiambia footer ienee kuanzia safu ya kwanza hadi safu ya mwisho kwa kutumia amri moja. Kodi yako inakuwa safi na rahisi kusomeka.
Ushauri wangu:
• Tumia Flexbox kwa upangaji rahisi kwenye headers au vitufe (buttons).
• Tumia Grid kwa mipangilio mikuu ya ukurasa na gallery tata.
• Acha kuweka containers ndani ya nyingine ili tu kurekebisha tatizo la mpangilio.
• Tumia kitengo cha fr kusambaza nafasi kwa urahisi.
Jaribu hili leo. Chukua sehemu (component) ya zamani uliyotengeneza kwa Flexbox. Iandike upya ukitumia CSS Grid. Utaona kodi yako ikipungua na mipangilio yako ikistahimili zaidi.