Kionyeshaji cha Grid/Flex kinagundua kila chombo cha CSS Grid na Flexbox na kuonyesha muundo wao kama uwekaji wa rangi.
Kionyeshaji cha Grid/Flex kinagundua kila chombo cha CSS Grid na Flexbox na kuonyesha muundo wao kama uwekaji wa rangi.
Kontena za Grid zinaonyesha mistari yenye rangi kwa kila safu na safu wima. Ukubwa wa track (1fr, auto, 200px) umewekwa lebo kwenye kila mstari. Maeneo ya pengo (gap) yameangaziwa kwa bendi zisizo na uwazi kabisa zinazoonyesha thamani ya pengo katika pikseli. Track za mfululizo (implicit) na dhahiri (explicit) zinatofautishwa na mistari thabiti dhidi ya iliyokatwa-katwa.
Kontena za Flex zinaonyesha mhimili mkuu (main axis) kama mshale (row, row-reverse, column, column-reverse) and mhimili mtambuka (cross axis) ulioko perpendicular kwake. justify-content na align-items zinaonyeshwa kwa viashiria vya upangaji vyenye lebo vinavyoonyesha jinsi nafasi inavyosambazwa kati ya watoto (children).
Chombo kinakagua ukurasa mzima kiotomatiki na kupata kila kipengele chenye display: grid au display: flex (pamoja na matoleo ya ndani). Hesabu ya beji inaonyesha jumla ya idadi iliyogunduliwa. Hakuna haja ya kuchagua vipengele kwa mwongozo — vyote vinapatikana na kuorodheshwa kiotomatiki.
Bofya kontena yoyote ili kuona sifa zake kamili za mpangilio: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap, na sifa zote za ukubwa wa watoto (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Kila kipengele cha mtoto ndani ya kontena ya Grid au Flex kinaonyesha ukubwa wake halisi uliotolewa, thamani za flex-grow/shrink, na uwekaji wa eneo la grid. Angalia haswa kiasi cha nafasi ambacho kila mtoto anachukua na kwa nini.
Inatambua kontena za Grid na Flex zilizowekwa ndani ya kontena nyingine za Grid/Flex. Overlay inatoa kila kiwango cha uwekaji ndani na rangi tofauti ili uweze kuona daraja kamili la mpangilio.
Safu wima ya grid ni pana au nyembamba kuliko inavyotarajiwa? Overlay inaonyesha ukubwa halisi wa track (1fr imetatuliwa kuwa 342px, auto imetatuliwa kuwa 156px) ili uweze kuona haswa jinsi kivinjari kilivyokokotoa ukubwa huo.
Kwa nini mtoto mmoja wa flex ni mpana kuliko mwingine? Kionyeshaji kinaonyesha thamani za flex-grow, flex-shrink, na flex-basis kwa kila mtoto, ikifanya mantiki ya usambazaji wa nafasi ionekane.
Rekebisha ukubwa wa kivinjari na utazame overlay ya grid ikisasishwa kwa wakati halisi. Angalia jinsi grid-template-columns inavyobadilika kutoka "1fr 1fr 1fr" kwenye desktop hadi "1fr" kwenye simu, na uthibitishe mpito katika kila breakpoint.
Tembelea tovuti zilizojengwa vizuri na uone jinsi zinavyotumia mipangilio ya Grid na Flex katika uzalishaji. Overlays za kuona zinafanya dhana dhahania (vipimo vya fr, auto-fit, justify-content) ziweze kugusika na kuingilika.
Hakikisha kuwa grid zote za kadi kwenye ukurasa zinatumia idadi sawa ya safu wima na thamani za pengo (gap). Overlay inafanya kutokubaliana kuonekana mara moja — sehemu moja inayotumia pengo la 20px wakati nyingine inatumia 24px ni wazi kwa mtazamo mmoja.
Fungua kizimbani kinachoelea cha DevSuite Pro na ubofye ikoni ya Grid/Flex Visualizer. Chombo kinakagua ukurasa na kutambua kontena zote za Grid na Flex.
Kila kontena ya Grid na Flex inapata overlay ya ukingo wenye rangi. Jopo linaorodhesha kontena zote zilizotambuliwa na aina zao (Grid au Flex) na kiteuzi cha kipengele.
Bofya kontena yoyote ili kuona sifa zake kamili za mpangilio. Kontena za Grid zinaonyesha mistari na ukubwa wa track; kontena za Flex zinaonyesha mwelekeo wa mhimili na upangaji.
Kila kipengele cha mtoto kinaonyesha ukubwa wake uliokokotolewa na sifa maalum za mpangilio (flex-grow, grid-area). Elewa jinsi nafasi inavyosambazwa kati ya watoto.
Bofya ikoni ya chombo tena ili kuondoa overlays zote na kurejea kwenye muonekano wa kawaida wa ukurasa.
Sakinisha DevSuite Pro bila malipo na ufungue zana 64+ za wasanidi kwa kivinjari chako.
