Grid/Flex Visualizer havaitsee kaikki CSS Grid- ja Flexbox-kontainerit verkkosivulta ja renderöi niiden asettelurakenteen värikkäinä päällekkäiskerroksina suoraan sivulle. Näet grid-viivat, raidan koot, väliarvot, flex-suunnat, kohdistusakselit ja lapsielementtien koot — kaikki visualisoituna avaamatta DevToolsia.
CSS Grid ja Flexbox ovat modernin verkkoasettelun perustoja, mutta ne ovat oletuksena näkymättömiä. Et voi nähdä grid-viivoja, flex-akseleita tai väliarvoja pelkästään sivua katselemalla. Selaimen DevTools tarjoaa joitakin grid-päällekkäiskerrosominaisuuksia, mutta ne edellyttävät kontainerin löytämistä Elements-paneelista ensin, päällekkäiskerroksen manuaalista käyttöönottoa ja näyttävät vain yhden kontainerin kerrallaan. Grid/Flex Visualizer automatisoi tämän kokonaan — se skannaa sivun, löytää jokaisen Grid- ja Flex-kontainerin ja renderöi niiden asettelurakenteen visuaalisina päällekkäiskerroksina. Grid-kontainerit näyttävät sarake- ja riviviivat merkittyine raidankokoineen. Flex-kontainerit näyttävät pääakselin suunnan, poikittaisakselin kohdistuksen ja tilan jakautumisen. Välit korostetaan värillisillä nauhoilla, jotka osoittavat pikseliarvot. Napsauta mitä tahansa kontaineria nähdäksesi yksityiskohtaisen ominaisuuspaneelin kaikkineen asetteluominaisuuksineen.
Grid-kontainerit näyttävät värillisiä viivoja jokaiselle rivi- ja sarakeraidalle. Raidankoot (1fr, auto, 200px) on merkitty kullekin viivalle. Välialueet korostetaan puoliläpinäkyvillä nauhoilla, jotka näyttävät väliarvon pikseleinä. Implisiittiset ja eksplisiittiset raidat erotetaan toisistaan yhtenäisillä ja katkoviivoilla.
Flex-kontainerit näyttävät pääakselin nuolena (row, row-reverse, column, column-reverse) ja poikittaisakselin siihen nähden kohtisuoraan. justify-content ja align-items visualisoidaan merkityillä kohdistusindikaattoreilla, jotka osoittavat tilan jakautumisen lapsielementtien välillä.
Työkalu skannaa automaattisesti koko sivun ja löytää jokaisen elementin, jolla on display: grid tai display: flex (mukaan lukien inline-variantit). Merkki näyttää havaittujen elementtien kokonaismäärän. Elementtejä ei tarvitse valita manuaalisesti — ne kaikki löydetään ja luetellaan automaattisesti.
Napsauta mitä tahansa kontaineria nähdäksesi sen täydelliset asetteluominaisuudet: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap ja kaikki lapsielementtien kokoon liittyvät ominaisuudet (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Jokainen lapsielementti Grid- tai Flex-kontainerin sisällä näyttää todellisen renderöidyn kokonsa, flex-grow/shrink-arvonsa ja grid-alueen sijoittelunsa. Näet tarkalleen, kuinka paljon tilaa kukin lapsi vie ja miksi.
Tunnistaa Grid- ja Flex-kontainerit, jotka on sisäkkäisenä muiden Grid/Flex-kontainerien sisällä. Päällekkäiskerros renderöi jokaisen sisäkkäistason eri väreillä, joten näet koko asetteluhierarkian.
Onko grid-sarake odotettua leveämpi tai kapeampi? Päällekkäiskerros näyttää todelliset raidankoot (1fr ratkaistuna 342 pikseliksi, auto ratkaistuna 156 pikseliksi), joten näet tarkalleen, miten selain laski koot.
Miksi yksi flex-lapsi on leveämpi kuin toinen? Visualisoija näyttää flex-grow-, flex-shrink- ja flex-basis-arvot kullekin lapselle, tehden tilan jakautumisen logiikasta näkyvän.
Muuta selaimen kokoa ja katso, kuinka grid-päällekkäiskerros päivittyy reaaliajassa. Katso, miten grid-template-columns muuttuu arvosta "1fr 1fr 1fr" työpöydällä arvoon "1fr" mobiilissa, ja varmista siirtymä jokaisessa taitekohdassa.
Vieraile hyvin rakennetuilla verkkosivustoilla ja katso, miten ne käyttävät Grid- ja Flex-asetteluja tuotannossa. Visuaaliset päällekkäiskerrokset tekevät abstrakteista käsitteistä (fr-yksiköt, auto-fit, justify-content) konkreettisia ja vuorovaikutteisia.
Tarkista, että kaikki korttiruudukot sivulla käyttävät samaa sarakkeiden määrää ja väliarvoja. Päällekkäiskerros tekee epäjohdonmukaisuuksista välittömästi näkyviä — se on silmiinpistävää, jos yksi osio käyttää 20 pikselin väliä toisen käyttäessä 24 pikseliä.
Avaa DevSuite Pro -kelluva telakka ja napsauta Grid/Flex Visualizer -kuvaketta. Työkalu skannaa sivun ja tunnistaa kaikki Grid- ja Flex-kontainerit.
Jokainen Grid- ja Flex-kontaineri saa värillisen reunapäällekkäiskerroksen. Paneelissa luetellaan kaikki havaitut kontainerit niiden tyypin (Grid tai Flex) ja elementtivalitsimen kera.
Napsauta mitä tahansa kontaineria nähdäksesi sen täydelliset asetteluominaisuudet. Grid-kontainerit näyttävät raitalinjat ja koot; Flex-kontainerit näyttävät akselin suunnat ja kohdistuksen.
Jokainen lapsielementti näyttää lasketun kokonsa ja asettelukohtaiset ominaisuutensa (flex-grow, grid-area). Ymmärrät, miten tila jakautuu lapsien kesken.
Napsauta työkalukuvaketta uudelleen poistaaksesi kaikki päällekkäiskerrokset ja palataksesi normaaliin sivunäkymään.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
