Tinutukoy ng Grid/Flex Visualizer ang bawat CSS Grid at Flexbox container sa isang webpage at ini-render ang kanilang layout structure bilang mga kulay na overlay nang direkta sa pahina. Makita ang mga grid line, track size, gap value, flex direction, alignment axis, at child element sizing — lahat ay na-visualize nang hindi binubuksan ang DevTools.
Ang CSS Grid at Flexbox ang pundasyon ng modernong web layout, ngunit hindi sila nakikita bilang default. Hindi mo makikita ang mga grid line, flex axis, o gap value sa simpleng pagtingin sa isang pahina. Nag-aalok ang browser DevTools ng ilang grid overlay feature, ngunit kailangan mo munang hanapin ang container sa Elements panel, i-enable ang overlay nang manu-mano, at nagpapakita lang ng isang container sa isang pagkakataon. Ino-automate ng Grid/Flex Visualizer ang lahat ng ito — ini-scan nito ang pahina, hinahanap ang bawat Grid at Flex container, at ini-render ang kanilang layout structure bilang mga visual overlay. Ang mga grid container ay nagpapakita ng column at row line na may mga labeled na track size. Ang mga flex container ay nagpapakita ng pangunahing direksyon ng axis, cross axis alignment, at kung paano ipinamamahagi ang espasyo. Ang mga gap ay naka-highlight na may mga kulay na banda na nagpapakita ng kanilang pixel value. I-click ang anumang container upang makita ang detalyadong property panel na naglilista ng bawat layout property.
Ang mga grid container ay nagpapakita ng mga kulay na linya para sa bawat row at column track. Ang mga track size (1fr, auto, 200px) ay may label sa bawat linya. Ang mga gap area ay naka-highlight na may semi-transparent na banda na nagpapakita ng gap value sa pixels. Ang implicit at explicit na track ay natatangi sa pamamagitan ng solid kumpara sa dashed na linya.
Ang mga flex container ay nagpapakita ng pangunahing axis bilang arrow (row, row-reverse, column, column-reverse) at ang cross axis na nakapatong dito. Ang justify-content at align-items ay na-visualize na may mga labeled alignment indicator na nagpapakita kung paano ipinamamahagi ang espasyo sa pagitan ng mga child.
Awtomatikong ini-scan ng tool ang buong pahina at hinahanap ang bawat elemento na may display: grid o display: flex (kasama ang mga inline variant). Ang isang badge count ay nagpapakita ng kabuuang bilang na natukoy. Hindi na kailangang manu-manong pumili ng mga elemento — lahat sila ay nahanap at nakalista nang awtomatiko.
I-click ang anumang container upang makita ang kumpletong layout property nito: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap, at lahat ng child sizing property (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Ang bawat child element sa loob ng isang Grid o Flex container ay nagpapakita ng aktwal na na-render na laki nito, mga flex-grow/shrink value, at grid area placement. Tingnan nang eksakto kung gaano karaming espasyo ang inookupahan ng bawat child at kung bakit.
Tinutukoy ang mga Grid at Flex container na naka-nest sa loob ng ibang Grid/Flex container. Ini-render ng overlay ang bawat antas ng nesting na may iba't ibang kulay upang makita mo ang kumpletong layout hierarchy.
Ang isang grid column ay mas malawak o mas makitid kaysa sa inaasahan? Ipinapakita ng overlay ang aktwal na track size (1fr na na-resolve sa 342px, auto na na-resolve sa 156px) upang makita mo nang eksakto kung paano kinalkula ng browser ang mga laki.
Bakit mas malawak ang isang flex child kaysa sa isa pa? Ipinapakita ng visualizer ang mga flex-grow, flex-shrink, at flex-basis value para sa bawat child, na ginagawang nakikita ang lohika ng pamamahagi ng espasyo.
I-resize ang browser at panoorin ang grid overlay na nag-a-update nang real-time. Tingnan kung paano nagbabago ang grid-template-columns mula "1fr 1fr 1fr" sa desktop patungong "1fr" sa mobile, at i-verify ang transition sa bawat breakpoint.
Bumisita sa mga mabuting website at tingnan kung paano nila ginagamit ang Grid at Flex layout sa production. Ang mga visual overlay ay ginagawang konkrete at interactive ang mga abstract na konsepto (fr units, auto-fit, justify-content).
Suriin na ang lahat ng card grid sa isang pahina ay gumagamit ng parehong column count at gap value. Ginagawa ng overlay na agad na nakikita ang mga pagkakaiba — ang isang seksyon na gumagamit ng 20px gap habang ang isa pa ay gumagamit ng 24px ay halata sa isang tingin.
Buksan ang DevSuite Pro floating dock at i-click ang icon ng Grid/Flex Visualizer. Ini-scan ng tool ang pahina at natutukoy ang lahat ng Grid at Flex container.
Ang bawat Grid at Flex container ay nakakakuha ng colored border overlay. Ang isang panel ay naglilista ng lahat ng natukoy na container na may uri nito (Grid o Flex) at element selector.
I-click ang anumang container upang makita ang kumpletong layout property nito. Ang mga grid container ay nagpapakita ng track line at size; ang mga flex container ay nagpapakita ng direksyon ng axis at alignment.
Ang bawat child element ay nagpapakita ng computed size nito at mga layout-specific na property (flex-grow, grid-area). Unawain kung paano ipinamamahagi ang espasyo sa pagitan ng mga child.
I-click muli ang icon ng tool upang alisin ang lahat ng overlay at bumalik sa normal na view ng pahina.
I-install ang DevSuite Pro nang libre at i-unlock ang 39+ developer tools para sa iyong browser.
